强大的js动画animejs使用

anime.js官网_免费、灵活的轻型JavaScript动画库 | animejs

安装及引用:

// 终端中安装:
npm install animejs //文件中引入
import anime from "animejs"

使用:

//html:<div class="w375">HelloWorld</div><div class="normal">正常文字</div><em class="em">斜体文字</em><article><div class="blue"></div><div class="green"></div><div class="yellow"></div></article><button class="play">play</button><button class="pause">pause</button><button class="restart">restart</button><button class="reverse">reverse</button><button class="skip">skip</button>//css:
.w375{width: 375px;padding: 50px 0;font-size: 50px;
}
.blue{width: 100px;height: 100px;background: blue;position: relative;border: 1px solid #f00;
}
.green{width: 100px;height: 100px;background: green;border: 1px solid #f00;
}
.yellow{width: 100px;height: 100px;background: yellow;border: 1px solid #f00;
}//js:
var myAnimation = anime({targets: ['.blue', '.green' ,'.yellow'],//需要执行动画的目标元素translateX: '200px',//'translateX':'px';'translateY':'px';'translateZ':'px';'rotate':'deg';'rotateX':'deg';'rotateY':'deg';'rotateZ':'deg';'scale':—;'scaleX':—;'scaleY':—;'scaleZ':—;'skew':'deg';'skewX':'deg';'skewY':'deg';'perspective':'px';scale: { //特殊属性,高级用法value: 1.5,duration: 1600,delay: 800,easing: 'easeInOutQuart'},width: {value: '-=20px', // 原始值 - 20 ,可以+=或*=或/=duration: 1800,easing: 'easeInOutSine'},borderWidth:anime.random(0, 8),//随机数height:function(el, i, l) { return i*30 + 10; },//使用函数返回数值rotate: 360,//可以省略单位,会自动补上单位borderRadius: ['10%', '50%'],//设定动画初始值// backgroundColor:'#f00',innerHTML: [0, 10000],keyframes: [ //动画关键帧{translateY: -40},{translateX: 250},{translateY: 40},{translateX: 0},{translateY: 0}],translateY: [ //属性关键帧{ value: -40, duration: 500 },{ value: 40, duration: 500, delay: 1000 },{ value: 0, duration: 500, delay: 1000 }],delay:anime.stagger(500, {start: 100}),//默认0,开始延迟毫秒数 number/function (el, index, total)/anime.stagger(500, {start: 100,direction: 'reverse'}):延迟从100ms开始,每个延迟500ms// anime.stagger(500, {start: 100,direction: 'reverse',easing: 'easeOutQuad'}) //direction:'reverse'(从目标元素最后一个元素到第一个元素执行动画)/'normal'(默认,按顺序执行)endDelay:function(el, i, l) {return i * 500;},//默认0,结束延迟毫秒数 number/function (el, index, total)duration: 3000,//默认1000,动画持续时长 number/function (el, index, total)autoplay:true,//默认true,是否自动执行动画loop: false,//默认false,是否循环执行动画或执行次数  number/booleandirection:"normal",//默认'normal',执行动画的方向 'normal'(正方向), 'reverse'(反方向), 'alternate'(往返)easing:'easeOutElastic(1, .5)',//默认easeOutElastic(1, .5),动画的速度曲线,可以为下面的值:// 匀速:linear,// 不匀速:easeIn/easeOut/easeInOut/easeOutIn + Quad(由快至慢)/Cubic(由快至慢，效果更强)/Quart(由快至慢，效果更强)/Quint(由快至慢，效果更强)/Sine(由快至慢，比Quad弱)/Expo(突然减速，效果较强)/Circ(突然减速，效果较弱)/Back(冲出终点后返回),例如 easeInOutSine// 三次贝塞尔:cubicBezier(.5, .05, .1, .3)// 弹簧:spring(1, 80, 10, 0)// 弹跳:easeInElastic,easeOutElastic,easeInOutElastic,// 台阶式:steps(10) //[1,+∞] 平均分成n份执行,有卡顿感// 自定义:function(el, i, total){return  function(time) {return Math.pow(Math.sin(time * (i + 1)), total);}}elasticity:400,//默认400,弹性大小,数值越大,弹性越大round:100,//默认false,给数字添加动画时,显示小数点后几位,10表示一位,1000表三位 number/booleanbegin:function(animation){},//动画开始的回调,执行一次update:function(animation){},//动画进行中的回调,执行多次complete:function(animation){},//动画完成的回调,执行一次// styleAttrs:'xxx',//css属性名(小驼峰):对应的属性值,一般是opacity和transforms,其他的可能会导致动画不稳定})document.querySelector('.play').onclick = myAnimation.play;//开始动画document.querySelector('.pause').onclick = myAnimation.pause;//暂停动画document.querySelector('.restart').onclick = myAnimation.restart;//重新开始动画document.querySelector('.reverse').onclick = myAnimation.reverse;//反转动画的方向document.querySelector('.skip').onclick = myAnimation.seek(myAnimation.duration * 1.5);//动画跳转到特定时间（以毫秒为单位）定格anime.remove('.remove-demo .line:nth-child(2) .el');//删除指定目标元素的动画myAnimation.finished.then(()=>{console.log('动画执行完成的回调');});//动画执行完成的回调//创建时间轴动画,add一个就执行一个,根据偏移量确定开始执行时间anime.timeline({duration: 1500,delay: 1000,easing: 'easeInOutQuad',direction: 'alternate',loop: true})//父时间轴实例中设置的参数将由所有子项继承,可继承下面5个:targets,duration,delay,endDelay,round.add({ targets: '.w375',  background: '#FFF',translateX: 50 }, 0) //add第一个参数是对象(同上),第二个参数是偏移量(String/Number).add({ targets: '.normal',  background: '#00F',translateX: 100 }, 1500)//绝对偏移量.add({ targets: '.em',  background: '#0F0',translateX: 100 }, '-=600')//相对偏移量

强大的js动画animejs使用相关推荐

【译】CSS动画 vs JS动画
原文地址目前有两个主流的方法在web上创建动画:使用CSS或JS.到底选择哪种方法来实现动画,完全取决于你的项目以及你想要达到的效果. tips: 对于简单的只出现一次的过渡效果,可以采用CSS动画 ...
10个免费好用功能强大的网页动画效果库
精选前端开发动效设计是2018年的热门趋势之一.如果你仔细找找的话,会发现许多有趣的用来构建UI动效的工具,而这些素材和工具正在成为越来越多设计项目中不可或缺的催化剂.今天-小编为你推荐10个靠谱的 ...
css动画和js动画_CSS与JS动画：哪个更快？
css动画和js动画 How is it possible that JavaScript-based animation has secretly always been as fast - or ...
Velocity.js介绍 --js 动画实现
原址:点击打开链接 Velocity.js介绍本文英文原文地址:http://davidwalsh.name/intro-javascript-animation 就像许多开发者确信的那样,在Web ...
Vue中的Js动画与Velocity.js 的结合
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
css动画与js动画的区别
CSS动画优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout,s ...
css3 动画 vs js 动画
之前被问到过,css3 动画与 js 动画孰优孰劣,脑袋的第一反应就是性能上肯定 css3 动画会好很多,但别人说不对,我就在想,不对?难道还有别的原因吗?答案是肯定的.先来看看二者实现动画的原理吧. ...
展开收起js动画效果
展开收起js动画效果 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Ad ...
[Day 7]JS FA、用户交互、JS动画的实现（二）
系列文章目录文章目录系列文章目录前言一获取动画对象二.设置动画参数三.添加事件和调用方法总结前言今天我们一起学习js动画一获取动画对象通过调用animate方法获得anima ...

强大的js动画animejs使用

强大的js动画animejs使用相关推荐

最新文章

热门文章