Angular CircularGauge - animation
To make your gauge "live", enable animation for it by setting the enabled property of the animation object to true. In this instance, the gauge indicators will appear in motion. In addition, within the animation object, you can set an appropriate easing mode using the easing property and specify how long the animation should run using the duration property.
jQuery
$(function() { $("#circularGaugeContainer").dxCircularGauge({ // ... animation: { easing: "linear", duration: 500 } }); });
Angular
<dx-circular-gauge ... > <dxo-animation easing="linear" [duration]="500"> </dxo-animation> </dx-circular-gauge>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // ... }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxCircularGaugeModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxCircularGaugeModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
<template> <DxCircularGauge ... > <DxAnimation easing="linear" :duration="500" /> </DxCircularGauge> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxCircularGauge, { DxAnimation } from 'devextreme-vue/circular-gauge'; export default { components: { DxCircularGauge, DxAnimation }, // ... } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import CircularGauge, { Animation } from 'devextreme-react/circular-gauge'; class App extends React.Component { render() { return ( <CircularGauge ... > <Animation easing="linear" duration={500} /> </CircularGauge> ); } } export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().CircularGauge() @* ... *@ .Animation(a => a .Easing(VizAnimationEasing.Linear) .Duration(500) ) )
easing
The animation easing mode specifies the speed at which the animation progresses at different points within the animation. The following values are available.
- easeOutCubic
The animation progresses according to the Ease-out cubic interpolation function - quickly at the beginning and slowly at the end of the animation process. - linear
The animation progresses at a constant pace.
If you have technical questions, please create a support ticket in the DevExpress Support Center.