Wijmo Animations

Wijmo controls can be animated using the wijmo.animate method. This behavior is totally customizable and users can define the how long the animation takes also. The example below illustrates by rotating a FlexGrid like a flip card.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wijmo from '@grapecity/wijmo'; import * as grid from '@grapecity/wijmo.grid'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create some random data let data = getData(); // // show the data in a grid let theGrid = new grid.FlexGrid('#theGrid', { itemsSource: data }); // // animate grid when user clicks the button document.querySelector('#btnAnimate').addEventListener('click', () => { wijmo.animate((pct) => { // // calculate transform for given percent (zero to one) let xform = ''; if (pct < 1) { if (pct > 0.5) pct = pct - 1; xform = 'rotateY( ' + (pct * 180) + 'deg)'; } // // apply the transform to the grid element theGrid.hostElement.style.transform = xform; }, 2000); // animate for two seconds }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Animate</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <button class="btn btn-default" id="btnAnimate"> Flip the Grid </button> <div id="theGrid"> </div> </div> </body> </html> export function getData() { // create some random data let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data = []; // for (let i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // return data; } .wj-flexgrid { max-height: 250px; margin-bottom: 2in; } .container-fluid { perspective: 1000px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as grid from '@grapecity/wijmo.grid'; // import { Component, Inject, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { DataService } from './app.data'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } // animate(grid: grid.FlexGrid) { wijmo.animate((pct: number) => { // // calculate transform for given percent (zero to one) let xform = ''; if (pct < 1) { if (pct > 0.5) pct = pct - 1; xform = 'rotateY( ' + (pct * 180) + 'deg)'; } // // apply the transform to the grid element grid.hostElement.style.transform = xform; }, 2000); // animate for two seconds } } // @NgModule({ imports: [WjGridModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Animate</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <button class="btn btn-default" (click)="animate(flexGrid)"> Flip the Grid </button> <wj-flex-grid #flexGrid [itemsSource]="data"> </wj-flex-grid> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { // create some random data let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data = []; // for (let i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // return data; } } .wj-flexgrid { max-height: 250px; margin-bottom: 2in; } .container-fluid { perspective: 1000px; } <template> <div class="container-fluid"> <button class="btn btn-default" @click="animate"> Flip the Grid </button> <wj-flex-grid ref="flexGrid" :itemsSource="data" :initialized='initialized'> </wj-flex-grid> </div> </template> <script> import '@grapecity/wijmo.styles/wijmo.css'; import 'bootstrap.css'; import Vue from 'vue'; import * as grid from '@grapecity/wijmo.grid'; import '@grapecity/wijmo.vue2.grid'; import * as wijmo from '@grapecity/wijmo'; import { getData } from './data'; let App = Vue.extend({ name: "app", data: function() { return { data : getData() }; }, methods:{ animate:function() { wijmo.animate((pct) => { // // calculate transform for given percent (zero to one) let xform = ''; if (pct < 1) { if (pct > 0.5) pct = pct - 1; xform = 'rotateY( ' + (pct * 180) + 'deg)'; } // // apply the transform to the grid element this.control.hostElement.style.transform = xform; }, 2000); // animate for two seconds }, initialized:function(control){ this.control = control; } } }); new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> .container-fluid .wj-flexgrid { max-height: 250px; margin-bottom: 2in; } .container-fluid { perspective: 1000px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Animate</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> export function getData() { // create some random data let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data = []; // for (let i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // return data; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wijmo from '@grapecity/wijmo'; import * as wjGrid from '@grapecity/wijmo.react.grid'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this.animate = () => { wijmo.animate((pct) => { // // calculate transform for given percent (zero to one) let xform = ''; if (pct < 1) { if (pct > 0.5) pct = pct - 1; xform = 'rotateY( ' + (pct * 180) + 'deg)'; } // // apply the transform to the grid element this.state.control.hostElement.style.transform = xform; }, 2000); // animate for two seconds }; this.initialized = (control) => { this.setState({ control: control }); }; this.state = { data: getData(), control: {} }; } render() { return <div className="container-fluid"> <button className="btn btn-default" onClick={this.animate}> Flip the Grid </button> <wjGrid.FlexGrid itemsSource={this.state.data} initialized={this.initialized}> </wjGrid.FlexGrid> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Animate</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .wj-flexgrid { max-height: 250px; margin-bottom: 2in; } .container-fluid { perspective: 1000px; } export function getData() { // create some random data let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data = []; // for (let i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // return data; }