动画效果之时间轴对象构造器（即逐个执行动画）

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>时间轴对象的测试</title><style type="text/css">div {width: 100px;height: 100px;background: pink;}.change1 {width: 300px;background: blue;/* transition: width 3s; *//* 仅仅width过渡变化 *//* 过渡效果，在三秒内，咋change1中的所有变化三秒完成 */transition: all 3s;}.change2 {height: 300px;background: yellow;transform: translate(100px, 100px);/* 样式变换位置，同样三秒执行完毕 */transition: all 3s;}</style></head><body><h5>效果为：在2s之后开始执行change1，用时3s，执行过后<br>即在5s后执行change2，用时3s，整个动画用时8s</h5><div id="demo" class=""></div><script type="text/javascript">var TimeLine = function() {this.order = []; //动画序列//几秒后执行,执行的函数,日志this.add = function(timeout, func, log) {//给动画序列赋值,以便调用this.order.push({timeout: timeout,func: func,log: log})//调用动画序列this.start = function(ff) { //支持快进for (s in this.order) {(function(me) { //匿名函数,后面括号内的参数相当于传参,执行var fn = me.func; //相当与 this.order[s].funcvar timeout = me.timeout;var log = me.log;timeout = Math.max(timeout - (ff || 0), 0); //即不能最小为0;ff默认0setTimeout(fn, timeout)setTimeout(function() { //可不写，就是看下传递的参数console.log('time=>', timeout, 'log=》', log)}, timeout)})(this.order[s]) //执行每一次的结果,如果不是自执行函数,呢么只会返回最候一个内容//即最后的结果是执行每一次定时器}console.log(this.order)}}}//执行过程//1,定义一个对象var demo = new TimeLine();var id=document.getElementById("demo")//2,添加必要属性demo.add(2000,function(){id.className="change1";},'这是是第一个动画，下面是第二个动画')demo.add(5000,function(){// id.className="change1 change2";id.classList.add("change2");//一样的效果})//3,开始执行// demo.start(2000);//在两秒后执行demo.start();</script></body>
</html>

进阶，简化代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>时间轴对象的封装</title><style type="text/css">div {width: 100px;height: 100px;background: pink;}.change1 {width: 300px;background: blue;transition: all 3s;}.change2 {height: 300px;background: yellow;transform: translate(100px, 100px);/* 样式变换位置，同样三秒执行完毕 */transition: all 3s;}</style></head><body><h3>效果为：在2s之后开始执行change1，用时3s，执行过后<br>即在5s后执行change2，用时3s，整个动画用时8s<br>也可以跳转到指定时间开始执行</h3><div id="demo" class=""></div><script type="text/javascript">/* Timeline函数是时间轴函数，即逐个播放动画success public@param fn             obj     触发的函数@param skiptime   num     跳转到几秒开始@param time         num     几秒后开始@param comment        str     注释return void         */function TimeLine(obj) {obj.fn = obj.fn || function() {};obj.skipTime = obj.skipTime || 0;obj.time = Math.max(obj.time - obj.skipTime) || 0;obj.comment = obj.comment || '注释';var arr = [];arr.push({time: obj.time,fn: obj.fn,comment: obj.comment,skipTime: obj.skipTime})for (var key in arr) {(function() {setTimeout(arr[key].fn, arr[key].time)setTimeout(function() {console.log('时间在' + arr[key].time + '秒开始播放;触发的函数为 \n' + arr[key].fn + ';直接跳转到' + arr[key].skipTime + '秒；注释：' +  arr[key].comment)}, arr[key].time)})(arr[key])}// console.log(arr)}TimeLine({time: 2000,fn: function() {demo.classList.add("change1");},comment: '这是第一个过程的动画'})TimeLine({time: 5000,fn: function() {demo.classList.add("change2");},comment: '这是第二个过程的动画'})</script></body>
</html>

动画效果之时间轴对象构造器（即逐个执行动画）相关推荐

PhotoShop简单案例（2）——利用时间轴功能制作制作省略号GIF动画
目录一.项目介绍二.基本流程 2.1 新建画布 2.2 输入文字 2.3 增删省略号 2.4 创建视频时间轴三.效果演示一.项目介绍本文将介绍利用时间轴功能制作制作省略号GIF动画,制作完成 ...
UE4/5 学习日记*Note2：动画K帧时间轴双击w冲刺，二段跳——2022/5/8
1.动画K帧对动画进行修改,记得备份动画序列中上编辑栏可创建关键帧,原理同Aodobe剪辑软件. 流畅k帧:找到动画的开始位置,或者结束位置,选择骨骼,一边小范围移动旋转,一边建新帧, ...
jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
android麦克风监听动画效果,微信小程序实现录音时的麦克风动画效果实例
前言这个简单的麦克风demo的创意是来源于"包你说"中的录音效果,实现的方式其实也并不难,但对于小程序中的简易动画的使用的确很实用. 效果先来看个demo,gif帧数比较低,实 ...
android 自定义view 动画效果,Android自定义view实现阻尼效果的加载动画
效果: 需要知识: 1. 二次贝塞尔曲线 2. 动画知识 3. 基础自定义view知识先来解释下什么叫阻尼运动阻尼振动是指,由于振动系统受到摩擦和介质阻力或其他能耗而使振幅随时间逐渐衰减的振动,又 ...
html5字体动画效果,7款超华丽的HTML5 Canvas文字动画特效
原标题:7款超华丽的HTML5 Canvas文字动画特效文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这 ...
html5 粒子动画效果制作,8款惊艳的HTML5粒子动画特效
原标题:8款惊艳的HTML5粒子动画特效 HTML5确实非常强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果,粒子动画在HTML5应用中也是比较消耗本地资源的,尤其是CPU,但 ...
android 播放gif动画效果,Android开发：教您如何让Gif动画动起来
我们已经连续推出<如何实现TCP和UDP传输>.< Android 提供了另外一种解决的办法,就是使用AnimationDrawable 这一函数使其支持逐帧播放,但是如何把gif ...
html如何设置图片循环旋转动画效果,纯CSS3实现图片无限旋转加载动画特效
纯 CSS3 实现 loading... 动画加载效果,需要一张透明的 png 图片,代码如下: HTML: CSS: /*动画效果*/ #loading-img { display: block; ...
html动画效果放大,一个CSS+jQuery实现的放大缩小动画效果
今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. 都是定死了的.因为需求就只有4个元素.如果是要用CSS的class来处理,那就需要用到CSS3动画了. 功能 : 在 ...

动画效果之时间轴对象构造器（即逐个执行动画）

进阶，简化代码

动画效果之时间轴对象构造器（即逐个执行动画）相关推荐

最新文章

热门文章