webkitAnimationEnd动画事件
春节终于过完了,自己春节似乎过的有点大,过完春节之后,态度一直没有调整好,总有一股过节的情绪,没有完全进入学习和工作的状态来。继续调整当中……
这两天项目中遇到一个小需求,十分类似于支付宝蚂蚁森林给小树苗浇水的效果,需要有一个浇水的动作,然后小树苗有点长大的感觉。
思来想去,最好的效果应该是用canvas画一下,受制于技术水平的限制,只能退而求其次,选择css3的动画效果(APP项目,css3兼容性问题可以通过前缀webkit解决)。
最终效果是:草地上有几棵小树苗,在完成某一动作之后,出现一个小水壶对小树苗浇点水,然后小树苗左右晃动几次,稍微变大一点。
最终实现的是:水壶浇水的动作做成了gif动画图片,在指定事件触发之后,水壶从右上角飞出,做出浇水动作,在浇水动作完成之后,小树苗开始晃动生长,并且水壶消失。
css3动画部分都属于比较好实现的部分,唯一需要注意的是,也是比较繁杂的是,动作需要逼真一点的话,那就得反复修改动画的细节参数,这里略过。这里我们需要关心的是:水壶浇水的动作完成之后,怎么界定这个动作完成了。
第一想法是:延时定时器,setTimeout,设定一个与水壶浇水一样时间的延时。但是既然是定时器,就必然存在阻塞的状态,如果出现阻塞,那么很可能两个动画就不会连贯执行。
那还能怎么办呢?
其实,css3为animation提供了一组动画事件,即webkitAnimationStart-动画开始,webkitAnimationEnd-动画结束,webkitAnimationIteration-动画重复播放 ,即可以很方便的监听动画过程。
项目中选择zepto来操作DOM
$(document.body).on('swing', function(){
$('.bottle').show().addClass('bottle-fadeIn');
$('.bottle').on('webkitAnimationEnd',function(){
$('.bottle').hide();
$('.tree').each(function(){
var index = (Math.random()*3).toFixed(2);
var self = this;
setTimeout(function(){
$(self).addClass('a-swing');
}, 200*index);
});
}); $('.tree').on('webkitAnimationEnd',function(){
$('.tree').css({'-webkit-transform':'scale(1.2,1.2)'});
$('.tree').removeClass('a-swing');
}) ;
});
在body体上自定义事件swing,以便在需要的时候出发即可。
class为bottle-fadeIn,是为水壶添加的渐现的动画,然后监听水壶动画结束的时间点,再触发小树苗生长的动画,为了不让多个树苗往同一个方向同一时间晃动,就定义了一个随机数index,对每一棵小树苗延迟添加动画class a-swing,并且监听小树苗动画结束之后,直接将小树苗直接放大1.2倍。
基本完成小需求了,就我个人而言还存在很多遗憾,效果并不理想。
webkitAnimationEnd动画事件的更多相关文章
- android图片透明度跟缩放大小动画事件
概序 : 动画事件写在xml中,然后用AnimationUtils去加载动画事件,再监听动画结束事件,隐藏imageview. 1. player_double_click_animation.xml ...
- CSS3动画事件
CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...
- 关于Animation动画事件的几项测试
测试版本unity5.3.4 1.当帧率不足时,Animation会跳帧,假如跳帧超过动画事件的帧,动画事件也会执行. 2.当Animation混合时,混合中的动画不管哪个当前有动画事件,都会执行. ...
- css3 animation动画事件
当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart //动画開始 An ...
- [Unity动画]03.动画事件
1.找到动画,添加动画事件 2.在脚本中添加回调方法 TestAnimator.cs using UnityEngine; public class TestAnimator : MonoBehavi ...
- Unity动画事件
动画事件添加 var clip = new AnimationClip();//clip,动画剪辑 储存基于动画的关键帧.这里新建动画剪辑 clip.SetCurve ("", ...
- Unity3D NGUI UIPlayTween(原UIButtonTween)动画事件详解
http://blog.csdn.net/asd237241291/article/details/8507817 原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 Unity3D引擎技术 ...
- DragonBones龙骨骨骼中的自定义事件(另有声音、动画事件)
参考: DragonBones骨骼动画事件系统详解 一.在DragonBones中添加自定义事件帧 动画制作时 时间轴拉到最下面有一个事件层,添加一个事件帧 左边属性面板定义自定义事件 二.Egret ...
- 【VUE】@click加上v-bind绑定切换类名及动画事件
好长的名字... 效果是 点击元素,通过改变类名的方式让其改变颜色+移动动画效果,这里用的是v-bind和@click 废话不说 show me the code! <div id=" ...
随机推荐
- LOJ 2587 「APIO2018」铁人两项——圆方树
题目:https://loj.ac/problem/2587 先写了 47 分暴力. 对于 n<=50 的部分, n3 枚举三个点,把图的圆方树建出来,合法条件是 c 是 s -> f 路 ...
- MAC上使用Enterprise Architecture,附带安装步骤及破解链接
绪论 网上找了半天这个主题也没有详细的步骤的昂,所以自己来造轮子了. 还有,百度搜EA破解版不靠谱,大搜狗更给力哦! 一.背景 穷逼只有一台存储空间不大MACAir,分给虚拟机Virtual Box的 ...
- Linux命令之shutdown
shutdown命令安全地将系统关机. 有些用户会使用直接断掉电源的方式来关闭linux,这是十分危险的.因为linux与windows不同,其后台运行着许多进程,所以强制关机可能会导致进程的数据丢失 ...
- Python进行RSA安装加密
一.下载ez_setup.py(http://peak.telecommunity.com/dist/ez_setup.py) 二.用python解释执行它 (如使用IDLE打开该py文件,按F5解释 ...
- ucos-iii串口用信号量及环形队列中断发送,用内建消息队列中断接收
串口发送部分代码: //通过信号量的方法发送数据 void usart1SendData(CPU_INT08U ch) { OS_ERR err; CPU_INT08U isTheFirstCh; O ...
- 黄聪:WordPress 启用HTTPS设置(转)
HTTPS已经成为网站的一种趋势,得益于数以万计的开发者和百万计的玩家,Wordpress启用HTTPS过程相当简单.下面就把Wordpress启用HTTPS访问的过程记录一下,以供参考. 一. 修改 ...
- DS二叉树--Huffman编码与解码
题目描述 1.问题描述 给定n个字符及其对应的权值,构造Huffman树,并进行huffman编码和译(解)码. 构造Huffman树时,要求左子树根的权值小于.等于右子树根的权值. 进行Huffma ...
- python+selenium自动化软件测试(第3章):unittes
From: https://blog.csdn.net/site008/article/details/77622472 3.1 unittest简介 前言 (python基础比较弱的,建议大家多花点 ...
- 关于 TensorFlow
TensorFlow 是一个用于人工智能的开源神器 TensorFlow中文社区 http://www.tensorfly.cn/ 文档 TensorFlow™ 是一个采用数据流图(data ...
- C++进阶--代码复用 继承vs组合
//############################################################################ /* * 代码复用: 继承 vs 组合 * ...