countupjs,一个有趣的数字翻滚动画
CountUp.js 是一个零依赖的轻量级 JavaScript 库,可用于快速创建以更有趣的方式显示数字的动画。
用法
参数:
target
= html元素的id,input,svg text元素,或者计数发生时先前选择的元素/输入的varstartVal
= 你要开始的值endVal
= 你想要达到的价值decimals
= (可选)数字中的小数位数,默认为0duration
= (可选)持续时间(以秒为单位),默认为2options
= (可选,请参阅demo)格式化/easing选项对象Options :{}//对象格式
useEasing: true, // toggle easing
useGrouping: true, // 1,000,000 vs 1000000
separator: ',', // character to use as a separator
decimal: '.', // character to use as a decimal
easingFn: easeOutExpo, // optional custom easing function, default is Robert Penner's easeOutExpo
formattingFn: formatNumber, // optional custom formatting function, default is formatNumber above
prefix: '', // optional text before the result
suffix: '', // optional text after the result
numerals: [] // optionally pass an array of custom numerals for 0-9
可以省略小数,持续时间和选项以使用默认值。
var numAnim = new CountUp("SomeElementYouWantToAnimate", 24.02, 99.99);
numAnim.start();
可选回调:
numAnim.start(someMethodToCallOnComplete);// or an anonymous function
numAnim.start(function() {// do something
})
其他方法
切换暂停/恢复:
numAnim.pauseResume();
重置动画:
numAnim.reset();
更新结束值和动画:
var someValue = 1337;
numAnim.update(someValue);
大数字动画
对于较大的数字,由于 CountUp 有很长的路要走几秒钟,动画似乎突然停止。解决方案是从 endVal
中减去100,然后使用回调来调用 update
方法,该方法以相同的持续时间完成动画,差异仅为100,以生成动画:
var endVal = 9645.72;
var numAnim = new CountUp("targetElem", 0, endVal - 100, duration/2);
numAnim.start(function() {numAnim.update(endVal);
});
使用 Angular
如果你使用Angular(不是必需的),请按照以下示例创建动画。确保包含 countUp.js 和 angular-countUp.js ,并注入 countUpModule 。
<h2 count-up end-val="873.4"></h2>
使用 angular-scroll-spy:
<h2 count-up id="numberAnimation" end-val="873.4" scroll-spy-event="elementFirstScrolledIntoView" scroll-spy></h2>
使用 Angular 2
该指令与 Angular 版本2.0.0兼容。
确保 countUp.js 在引导期间作为全局依赖关系加载。
请注意,options 参数的值直接传递到指令属性选择器。
import {Component, NgModule} from '@angular/core';import {CountUpModule} from 'countup.js/dist/countUp.module';@NgModule({imports: [CountUpModule],bootstrap: [AppComponent]
})
export class AppModule {}// ...
// ...
// Use in some component contained within the importing module...@Component({selector: 'counting-header',template: `
`}) export class CountingHeaderComponent { @Input() myStartVal: number; @Input() myEndVal: number;}
定制 easing 动画:
你可以选择应用自定义 easing 函数,它将接收计算贝塞尔曲线所需的4个参数:
t
(当前时间);b
(开始值);c
(开始值和目标值之间的差值);d
(补间的总时间).
你可以使用任何Robert Penner的 easing 函数。只需要避免使用“弹性”功能,因为它们导致双向计数。
如果不指定自定义 easing 函数,CountUp 将使用默认的 easeOutExpo。
例如:
var easeOutCubic = function(t, b, c, d) {var ts = (t /= d) * t;var tc = ts * t;return b + c * (1.77635683940025e-15 * tc * ts + 0.999999999999998 * tc + -3 * ts + 3 * t);
};
var options = {easingFn: easeOutCubic
};
var demo = new CountUp("myTargetElement", 24.02, 94.62, 2, 2.5, options);
demo.start();
countupjs,一个有趣的数字翻滚动画相关推荐
- RN实现仿余额宝余额数字翻滚动画特效
前语 前段时间公司有个需求,需要实现一个数字翻滚的动画,要求为:数字格式化为每隔3位逗号分隔,数字最后三位执行动画,从左往右,依次翻滚,翻滚时间持续3秒钟,类似于余额宝金额滚动的动画,要求RN实现,效 ...
- 一个有趣的数字变化算法
package com.bootdo.test.controller;public class SevenNumber {/** 由7位数中的(单位数与尾数)(双位数与尾数)发生的变化 1. 尾数的变 ...
- Flutter 数字增加动画
在移动应用开发中,流畅的动画不仅可以给人留下美好的印象,还可以提高用户体验.在Flutter开发中,官方提供了简洁且强大的动画API,比较核心的有AnimationController和Animati ...
- 7-114 谁先倒 (15分) 划拳是古老中国酒文化的一个有趣的组成部分。酒桌上两人划拳的方法为:每人口中喊出一个数字,同时用手比划出一个数字。如果谁比划出的数字正好等于两人喊出的数字之和,谁就输了
划拳是古老中国酒文化的一个有趣的组成部分.酒桌上两人划拳的方法为:每人口中喊出一个数字,同时用手比划出一个数字.如果谁比划出的数字正好等于两人喊出的数字之和,谁就输了,输家罚一杯酒.两人同赢或两人同输 ...
- python实现简单小游戏_用python开发一个有趣的猜数字小游戏(实现简单的GUI界面学习)...
文章目录 用python开发一个有趣的猜数字小游戏 用于字符串的格式化,通过 {} 和 : 来代替以前的 % 1. python的GUI编程 1.1 pythonGUI常用库对比 Python 提供了 ...
- L1-019 谁先倒 (15分) 划拳是古老中国酒文化的一个有趣的组成部分。酒桌上两人划拳的方法为:每人口中喊出一个数字,同时用手比划出一个数字。如果谁比划出的数字正好等于两人喊出的数字之和,谁就输了
L1-019 谁先倒 (15分) 划拳是古老中国酒文化的一个有趣的组成部分.酒桌上两人划拳的方法为:每人口中喊出一个数字,同时用手比划出一个数字.如果谁比划出的数字正好等于两人喊出的数字之和,谁就输了 ...
- 9个非常有趣的HTML5 Canvas动画特效合集
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- matlab制作有趣动画制作,18个超有趣的SVG绘制动画赏析
本文作者html5tricks,转载请注明出处 SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种 ...
- 用SVG和Vanilla JS框架创建一个“星形变心形”的动画效果
在我写的这篇文章中, 讲述了如何用Vanilla JavaScript使动画顺滑的从一种状态过渡到另一种.最好先看下那篇文章,因为在这篇文章中我们要用到一些那篇文章中讲过的内容.例如例子的演示.各种时 ...
最新文章
- android自定义dialog开源库,android-dialog: 此框架提供五种对话框的显示,并支持对话框的扩展,目的是为了提供对话框的统一管理,并提供对话框显示的公共接口。...
- ConditionObject源码
- 华为OV小米鸿蒙,华为鸿蒙开源,小米OV们会采用吗?
- 浅谈开发中的MVVM模式及与MVP和MVC的区别
- AI 的下一个重大挑战:理解语言的细微差别
- python四则运算器tkinter_Python基于Tkinter的二输入规则器(乞丐版)
- 强化学习数学基础1---Policy Gradient
- .net中调用windows performance记录性能信息
- Use // eslint-disable-next-line to ignore the next line.解决办法
- 0=iiLen 在C++中
- 论文笔记_SLAM_综述十几篇_目录
- java64位1.8.0下载_jdk1.8下载 64位
- 标准软件开发过程 文档
- 单机如何修改服务器,修改dnf单机服务器地址
- 一行代码下载网页视频!
- EmmyLua For Intellij IDEA注解功能的一些用法
- 分享倒计时小工具(两个)
- 在html中加动画效果,教你如何在网页上用H5实现动画效果
- Oracle学习(七)——————————————查询进阶
- 小窍门解决大问题(绝对值得收藏)