如何停止CSS3的动画?
2013-11-19 11:39
381 查看
前言
我们在移动端一般使用zepto框架,与其说zepto是jquery的轻量级替代版,不如说是html5替代版我们在js中会用到animate方法执行动画,这个家伙可是真资格的动画,完全是css一点点变化的!
而zepto则不然,使用的是HTML5/CSS3的方案,而CSS相关是不保存元素状态值的,也没办法保存,所以停止动画就成了一大问题
我们今天就一起来讨论下相关停止动画的方案,反正没有什么好的......
CSS3动画原理
在现有浏览器中,一般有两种模式(我只知道两种):一种是js动画,他是动态改写元素的style实现动画,所以任意时间想停止动画都是没问题的,因为我们可以获得各个阶段的状态值
另一种就是CSS3动画了,至于CSS3动画的原理,我不知道但是可以说一点的就是——见代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script id="Script1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script> </head> <body> <div id="Div1" style="background-color: Orange; width: 100px; height: 100px; position: absolute; left: 0; border: 1px solid black; "> </div> </body> <script src="../zepto.js" type="text/javascript"></script> <script type="text/javascript"> var d = $('#d'); d.animate({ left: '100px' }, 10000); setTimeout(function () { d.html('left: ' + d.css('left')); }, 1); </script> </html>
http://sandbox.runjs.cn/show/xziwuir2
zepto的animate事实上马上就改变了style的值,所以我们在里面看到了left为100px,虽然他正在运动
而他动画的实现事实上使用的是CSS3的transition动画属性,我们这里来看看zepto的源码:
var prefix = '', eventPrefix, endEventName, endAnimationName, vendors = { Webkit: 'webkit', Moz: '', O: 'o', ms: 'MS' }, document = window.document, testEl = document.createElement('div'), supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i, transform, transitionProperty, transitionDuration, transitionTiming, animationName, animationDuration, animationTiming, cssReset = {} function dasherize(str) { return downcase(str.replace(/([a-z])([A-Z])/, '$1-$2')) } function downcase(str) { return str.toLowerCase() } function normalizeEvent(name) { return eventPrefix ? eventPrefix + name : downcase(name) } $.each(vendors, function (vendor, event) { if (testEl.style[vendor + 'TransitionProperty'] !== undefined) { prefix = '-' + downcase(vendor) + '-' eventPrefix = event return false } }) transform = prefix + 'transform' cssReset[transitionProperty = prefix + 'transition-property'] = cssReset[transitionDuration = prefix + 'transition-duration'] = cssReset[transitionTiming = prefix + 'transition-timing-function'] = cssReset[animationName = prefix + 'animation-name'] = cssReset[animationDuration = prefix + 'animation-duration'] = cssReset[animationTiming = prefix + 'animation-timing-function'] = '' $.fx = { off: (eventPrefix === undefined && testEl.style.transitionProperty === undefined), speeds: { _default: 400, fast: 200, slow: 600 }, cssPrefix: prefix, transitionEnd: normalizeEvent('TransitionEnd'), animationEnd: normalizeEvent('AnimationEnd') } $.fn.animate = function (properties, duration, ease, callback) { if ($.isPlainObject(duration)) ease = duration.easing, callback = duration.complete, duration = duration.duration if (duration) duration = (typeof duration == 'number' ? duration : ($.fx.speeds[duration] || $.fx.speeds._default)) / 1000 return this.anim(properties, duration, ease, callback) } $.fn.anim = function (properties, duration, ease, callback) { var key, cssValues = {}, cssProperties, transforms = '', that = this, wrappedCallback, endEvent = $.fx.transitionEnd if (duration === undefined) duration = 0.4 if ($.fx.off) duration = 0 if (typeof properties == 'string') { // keyframe animation cssValues[animationName] = properties cssValues[animationDuration] = duration + 's' cssValues[animationTiming] = (ease || 'linear') endEvent = $.fx.animationEnd } else { cssProperties = [] // CSS transitions for (key in properties) if (supportedTransforms.test(key)) transforms += key + '(' + properties[key] + ') ' else cssValues[key] = properties[key], cssProperties.push(dasherize(key)) if (transforms) cssValues[transform] = transforms, cssProperties.push(transform) if (duration > 0 && typeof properties === 'object') { cssValues[transitionProperty] = cssProperties.join(', ') cssValues[transitionDuration] = duration + 's' cssValues[transitionTiming] = (ease || 'linear') } } wrappedCallback = function (event) { if (typeof event !== 'undefined') { if (event.target !== event.currentTarget) return // makes sure the event didn't bubble from "below" $(event.target).unbind(endEvent, wrappedCallback) } $(this).css(cssReset) callback && callback.call(this) } if (duration > 0) this.bind(endEvent, wrappedCallback) // trigger page reflow so new elements can animate this.size() && this.get(0).clientLeft this.css(cssValues) if (duration <= 0) setTimeout(function () { that.each(function () { wrappedCallback.call(this) }) }, 0) return this }
View Code
最后实际上是执行anim实现我们的动画,大家注意看这里
$(this).css(cssReset)
this.css(cssValues)
他事实上搞了个先设置动画属性,再给style属性给元素,所以会产生动画
到此,zepto实现动画原理我们大概知道了,现在问题就是如何停止他了,所以我们继续往下看
如何停止动画
我们先看看这个东西:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script id="Script2" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script> </head> <body> <div id="Div2" style="background-color: Orange; width: 100px; height: 100px; position: absolute; left: 0; border: 1px solid black;"> </div> </body> <script src="../zepto.js" type="text/javascript"></script> <script type="text/javascript"> var d = $('#d'); d.animate({ left: '100px' }, 10000); setInterval(function () { d.html('left: ' + d.css('left') + ' _ offsetLeft: ' + d[0].offsetLeft); }, 1); </script> </html>
http://sandbox.runjs.cn/show/gdqezvdo
其中虽然left一开始就变了,我们惊奇的发现,offset这个家伙居然保存了我们的状态!!!我和我的小伙伴都惊呆了,因为我之前一直以为什么状态都不能获得,于是我们为他加上mousedown事件,各位运动时候点击试试
我们这里这样干了下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script id="Script3" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script> </head> <body> <div id="Div3" style="background-color: Orange; width: 100px; height: 100px; position: absolute; left: 0; border: 1px solid black;"> </div> </body> <script src="../zepto.js" type="text/javascript"></script> <script type="text/javascript"> var d = $('#d'); d.animate({ left: '100px' }, 10000); setInterval(function () { d.html('left: ' + d.css('left') + ' _ offsetLeft: ' + d[0].offsetLeft); }, 1); d.mousedown(function (e) { console.log(d); d.css('transition', 'left 0s linear'); d.css('left', d[0].offsetLeft + 'px'); }); </script> </html>
于是我们发现,动画停止了,亲!他真的停止了!!!
PS:因为项目过程中,我这里要模仿类似iscroll的滚动效果,所以使用的最多的就是top或者translate3d(0, 0, 0)这种东西
结语
本来这里还想深入一点研究下的,但是现在时间有点来不及,事情有点多,暂时到这里了吧,具体的demo争取周末搞出来相关文章推荐
- css3 动画停止的时候如何保持最后一个动作不变
- CSS3动画效果:如何创建带有反弹特效的动画?
- 如何让CSS3动画在执行完一遍后再次重新执行
- JS如何监控css3动画
- 如何解决安卓(系统版本低) CSS3 动画问题---高性能动画
- Android中如何使用rotate实现图片不停旋转的效果与动画的停止
- UIView动画如何停止
- CSS3动画入门 CSS动画如何使用(举例说明)
- 如何在Swiper内制作CSS3动画效果
- SASS使用CSS3动画并使动画暂停和停止在最后一帧的简单例子
- CSS3 transition介绍 | 如何设计炫酷的动画效果?
- 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用
- 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用
- IE的下载界面会停止CSS3动画
- 如何在Swiper内制作CSS3动画效果
- css3 | 中的animation/@keyframes xz动画效果-如何使用纯css实现动画效果? 用法:animation:xz 3s 2 4s alternate; 参数:animati
- ss3 动画停止的时候如何保持最后一个动作不变
- 如何方便的控制css3动画开始时间点与持续时间
- 如何停止和扭转UIView的动画
- android View如何停止动画