jQWidgets jqxGauge RadialGauge Easing 属性

介绍

jQWidgets jqxGauge 是一个专业的数据可视化组件库，可用于创建仪表盘、指示器、图表、图形和地图等。RadialGauge 是 jqxGauge 的一个类型，用于创建径向仪表盘。

Easing 属性是 jqxGauge RadialGauge 的一个可选属性，用于指定动画效果的形式。

语法

easing: String;

取值

Easing 属性的取值包括以下几种：

• linear（默认）：匀速运动，即动画效果一直保持一致；
• easeInQuad：加速运动，即动画效果一开始比较慢，然后逐渐加速；
• easeOutQuad：减速运动，即动画效果一开始比较快，然后逐渐减速；
• easeInOutQuad：先加速后减速运动，即动画效果先慢后快再慢；
• easeInCubic：加速运动；
• easeOutCubic：减速运动；
• easeInOutCubic：先加速后减速运动；
• easeInQuart：加速运动；
• easeOutQuart：减速运动；
• easeInOutQuart：先加速后减速运动；
• easeInQuint：加速运动；
• easeOutQuint：减速运动；
• easeInOutQuint：先加速后减速运动；
• easeInSine：渐进式加速运动，即动画效果开始时比较慢，但比easeInQuad更加柔和；
• easeOutSine：渐进式减速运动，即动画效果结束时比较慢，但比easeOutQuad更加柔和；
• easeInOutSine：先渐进式加速后渐进式减速运动，即动画效果先慢后快再慢；
• easeInExpo：渐进式加速运动，即动画效果开始时比easeInQuad更柔和；
• easeOutExpo：渐进式减速运动，即动画效果结束时比easeOutQuad更柔和；
• easeInOutExpo：先渐进式加速后渐进式减速运动；
• easeInCirc：渐进式加速运动，即动画效果开始时比easeInQuad更柔和；
• easeOutCirc：渐进式减速运动，即动画效果结束时比easeOutQuad更柔和；
• easeInOutCirc：先渐进式加速后渐进式减速运动；
• easeInElastic：弹簧式运动，即动画效果开始时比较慢，并具有回弹效果；
• easeOutElastic：弹簧式运动，即动画效果结束时比较慢，并具有回弹效果；
• easeInOutElastic：先弹簧式运动，然后渐进式减速运动；
• easeInBounce：跳跃式运动，即动画效果开始时具有跳跃效果；
• easeOutBounce：跳跃式运动，即动画效果结束时具有跳跃效果；
• easeInOutBounce：先跳跃式运动，然后渐进式减速运动；
• easeInBack：滑行式加速运动，即动画效果开始时具有滑行的感觉；
• easeOutBack：滑行式减速运动，即动画效果结束时具有滑行的感觉；
• easeInOutBack：先滑行式加速后滑行式减速运动，即动画效果先慢后快再慢；
• easeInExpo：渐现式运动，即动画效果具有逐渐出现的感觉；
• easeOutExpo：渐隐式运动，即动画效果具有逐渐消失的感觉；
• easeInOutExpo：先渐现式运动后渐隐式运动，即动画效果先出现后消失。

实例

以下是一个 jqxGauge RadialGauge 控件的示例，演示了如何使用 easing 属性来指定动画效果的形式。

// 创建 RadialGauge 控件
$("#gaugeContainer").jqxGauge({
    ranges: [],
    cap: { size: '5%', style: { fill: "#00CC00", stroke: "#00CC00" } },
    border: { style: { fill: "#CCCCCC", stroke: "#888888", "stroke-width": 1 } },
    ticksMinor: { interval: 2.5, size: '5%' },
    ticksMajor: { interval: 10, size: '10%' },
    labels: { position: 'inside', interval: 10 },
    easing: 'easeInOutBounce', // 添加 easing 属性
    value: 0,
    min: 0,
    max: 100
});

// 设置 RadialGauge 控件的值
$("#gaugeContainer").jqxGauge('value', 75);

注意事项

• Easing 属性只有在使用动画效果时才有效。
• 不同的 easing 取值对应的动画效果不同，可以根据实际需要进行选择。
• 取值为 easeInSine、easeOutSine 和 easeInOutSine 的 easing 效果比较柔和，可用于创建较为细腻的动画效果；取值为 easeInExpo、easeOutExpo 和 easeInOutExpo 的 easing 效果比较激进，可用于创建较为夸张的动画效果。