本篇内容介绍了“CSS怎么实现多屏复杂动画效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
技巧一、使用animation-play-state控制每屏动画播放
1. 类名active与动画触发
首先,使用active触发每一屏的动画,几乎已经约定俗成,应该也建议成为默认的行业规范。
一般做法是,当对应一屏内容进入的时候,使用JS给容器添加类名active:
1 | container.classList.add( "active" );
|
如果你做的动画逼格较高,希望每次浏览这一屏内容的时候,动画都走一遍,可以使用reflow重新触发一下animation:
1 2 3 | container.classList.remove( "active" );
container.offsetWidth=container.offsetWidth;
container.classList.add( "active" );
|
2. 类名active与动画控制技巧
如何具体控制动画的播放呢?我们通常第一反应是使用下面的方法实现,动画的完整CSS代码在active状态下呈现,如:
1 2 3 4 5 6 7 8 | .element1{ /*尺寸与定位*/ }
.element2{ /*尺寸与定位*/ }
.element3{ /*尺寸与定位*/ }
...
.active.element1{animate:name11s;}
.active.element2{animate:name21s;}
.active.element3{animate:name21s;}
...
|
从实现和功能上将,上面方法是很不错的,通俗易懂,不易犯错。不过我个人更喜欢使用配合CSS3的animation-play-state属性对每屏动画进行控制,实现如下:
动画相关CSS代码直接写在元素上:
1 2 3 4 | .element1{ /*尺寸与定位*/ animate:name11s;}
.element2{ /*尺寸与定位*/ animate:name21s;}
.element3{ /*尺寸与定位*/ animate:name31s;}
...
|
创建一个类名,如.animate,凡是使用到了animation动画的元素都添加这个类名;
如下CSS代码:
1 2 3 4 5 6 | .animate{
animation-play-state:paused;
}
.active.animate{
animation-play-state:running;
}
|
之所以个人更喜欢后面的方法,是因为有一种“无侵入”的感觉,代码层次清晰,控制关系明确。有利于后期的维护与扩展。
然而,使用animation-play-state还是有些需要注意的,对于IE10/IE11浏览器,animation-play-state是不能简写的。如:
1 | .element{animate:shake4s2sbothinfinitepaused;}
|
只会让整个CSS声明挂掉的!如下写法支持:
1 2 3 4 | .element{
animate:shake4s2sbothinfinite;
animation-play-state:paused;
}
|
有人可能要奇怪了,怎么突然IE浏览器乱入了?
首先,我们不能无视主流手机之Windows Phone. 其次,帅气的翻屏动画并不是移动端专有,桌面端也适用。稍稍用力,桌面移动全适配,何乐而不为!
技巧二、不同状态下的连续动画
有时候,动画可能不是一波流,分状态。
关键点就是动画分解与延时。
据我所知,没办法只使用一个keyframes关键帧声明就实现这个效果,因为,这里有动画状态的变化:一个只执行一次的动画和一个无限循环动画。
怎么办?我们可以将动画分解,写2个animation keyframes动画关键帧描述。
1 2 | @keyframesfadeIn{ /*...*/ }
@keyframesfloat{ /*...*/ }
|
① 提取公用动画
这类多屏动画是有N多元素同时执行不同的动画。比方说,火箭是淡出,然后上下漂浮;火箭的火焰是淡出,然后大小变化;黑洞是淡出,然后左右随波。你如何实现?
如果纯粹借助animation语法,应该是:
1 2 3 | .element1{animation:fadeIn1s,float.5s1sinfinite;} /*我淡出,需要1秒;我1秒后开始无限漂浮*/
.element2{animation:fadeIn1s,size.5s1sinfinite;} /*我淡出,需要1秒;我1秒后开始大小变化*/
.element3{animation:fadeIn1s,move.5s1sinfinite;} /*我淡出,需要1秒;我1秒后开始左右移动*/
|
可以看到,淡出是公用的动画效果,我们可以借助嵌套标签,实现公用语法的合并,方面后期维护:
1 2 3 4 | .element-wrap{animation:fadeIn1s;} /*大家都1秒淡出*/
.element1{animation:float.5s1sinfinite;} /*我1秒后无限漂浮*/
.element2{animation:size.5s1sinfinite;} /*我1秒后忽大忽小*/
.element3{animation:move.5s1sinfinite;} /*我1秒后左右移动*/
|
②避免变换冲突
有个元素动画是边360度旋转、边放大(从0放大到100%),像这种具有典型特征的动画我们显然要独立提取与公用的:
1 2 | @keyframesspin{ /*transform:rotate...*/ }
@keyframeszoomIn{ /*transform:scale...*/ }
|
好了,现在问题来了,变放大边旋转:
1 | .element{animation:spin1s,zoomIn1s;} /*旋转:啊,完蛋啦,我被放大覆盖啦!*/
|
由于都是使用transform, 发生了残忍的覆盖。当然,有好事的人会说,你使用zoom不就好了!确实,如果只是移动端,使用zoom确实棒棒哒!但是,我们这个企业活动,PC是主战场,因此,FireFox浏览器(FF不识zoom)是不能无视的。
怎么办?重新建一个名为spinZoomIn的动画关键帧描述还是?
对啊,你直接外面套一层标签不就万事大吉了。
1 2 | .element-wrap{animation:spin1s;} /*我转转转*/
.element{animation:zoomIn1s;} /*我大大大*/
|
技巧三、无侵入定位和居中定位准则
1. 这里的“无侵入定位”指不受animation影响的元素定位,包含两部分:一是不使用keyframes关键帧决定初始位置;二是不要使用keyframes中出现的属性定位。
①. 不使用keyframes决定初始位置
应该都知道,CSS3 animation的fill-mode可以决定元素动画结束前后的位置,也就是也具有定位的作用。此时,可能就会有小伙伴,故作聪明,利用animation keyframes 0% {}或form {}去做定位,貌似,还省了写代码。看上去很赞,实际上狭隘了,这对于对animation支持不佳或不支持的浏览器实际上是不友好的,例如Android2.3不支持animation-fill-mode, IE6-IE9不支持CSS3 animation,于是乎,当遭遇这些浏览器的时候,页面动画元素的布局实际上是毁掉的。所以,这些动画元素定位的时候,需要使用“无侵入定位”,也就是,就算页面没有animation, 我也是个“标致人儿”。
②. 不使用keyframes中出现的属性定位
举个例子,有个球,正好定位在模块的中心,同时有个无限旋转效果。使用transform: translate(-50%,-50%)居中定位再合适不过了,不用我心里难受,于是,使用了transform定位。此时,冲突发生,旋转动画也是需要transform变换的。
1 2 3 4 | @keyframesspin{
0%{transform:rotate(0);}
100%{transform:rotate(360deg);}
}
|
要么使用业界约定俗成spin覆盖,要么另起炉灶没法重用:
1 2 3 4 | @keyframesspin-trans{
0%{transform:rotate(0)translate(-50%,-50%);}
100%{transform:rotate(360deg)translate(-50%,-50%);}
}
|
显然,都是不合适的。建议使用传统left/top/margin进行定位,与transform变换动画“无侵入”。
2. 这里的“居中定位准则”包含两部分:一是元素定位在容器中间位置;二是元素的定位方式为居中定位。
①. 元素定位在容器中间
容器以及容器内的动画元素可以看成是一个动画模块,为了这个模块可以轻松驾驭水平布局和垂直局部,里面的动画元素形成的整体一定要在容器的中间,不要被设计稿或周围环境影响。
举个简单例子,本文一开始展示的「企业QQ-新年祝福」活动。
企业产品用户特点比较鲜明:一是访问主要集中在桌面端,二是有70~80%用户使用的是webkit/blink内核浏览器。所以,大家可以理解为何设计稿明明针对桌面端,却有如此多细腻的动画设计了。
故事是这样的,桌面版做好了,1024-1224自适应,IE7以上都兼容(无侵入定位准则)(除了没动画),经验分享:多屏复杂动画CSS技巧三则!此时负责视觉的同学希望也能适配移动端,可以增加一定的传播,我觉得挺好的,于是,决定通过技术手段,让活动页面能游走于桌面和移动之间,同时,保证各种动画效果棒棒哒!
②. 定位方式为居中定位
所谓“居中定位”是相对“传统定位”而言的。Web页面中的模块、文字什么的默认都是相对于左上角堆砌的,所以,很自然地,我们在重构页面,做布局,写交互效果的时候,也都是相对左上角定位。活用元素本身的定位特性,这是很赞的也推荐这么做!但是,如果你和多元素CSS动画打交道,可能就需要改变下惯性思维了,很重要的一点就是“从以左上角为参考点变成以中心点为参考点”。
我们在实现多元素动画效果时候,会出现两类角色:一是容器;二是容器里面诸多动画元素。
其中,对于容器元素,尤其在做移动端产品时候,我们很自然会让其居中定位:
1 2 3 4 | .container{
position:absolute;left:50%;top:50%;
transform:translate3d(-50%,-50%,0);
}
|
这样,各种尺寸的手机,我们都能让其居中显示(大尺寸可能需要一定的缩放)。
但是,我们有没有想过让容器里面的诸多动画元素也居中定位显示呢?
用代码来解释就是从左上角定位(或右上角定位):
1 2 3 | .example{
position:absolute;left:100px;top:100px;
}
|
变成中心点定位+ margin偏移:
1 2 3 4 | .example{
position:absolute;left:50%;top:50%;
margin-left:-100px;margin-top:-100px;
}
|
“CSS怎么实现多屏复杂动画效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注天达云网站,小编将为大家输出更多高质量的实用文章!