移动web动画设计的一点心得

时间:2019-10-03 08:40来源:动画设计
当年三月份,由于商场事必须要,小编转换工作岗位到微信产品部,离开了TID集团,人都以有心境的动物,更况且在三个团体呆了快3年,心中特别不舍,鬼哥说了“天下没有不散的宴席

当年三月份,由于商场事必须要,小编转换工作岗位到微信产品部,离开了TID集团,人都以有心境的动物,更况且在三个团体呆了快 3 年,心中特别不舍,鬼哥说了“天下没有不散的宴席...”,在自己的世界里又多了三次分离的痛苦(即使还在周边职业)。出席了微信产品基本后,开端新的团伙生活,工作比原先忙多了,不经常周末也要上班,须求更加快更敏捷的产生任务,除了重构页面,须要积极出席边缘外的办事,承担越来越多。这段日子比较忙,给自个儿敲个响钟:注意身体。

讲完题外话,伊始以来的核心动画设计。固然css3动画基础知识学习过,但原先项目应用情状少之甚少,并未太多的实施,出席新集团来讲,做得多少个门类与动画片有关,尝试用css3来贯彻,进程中碰着了众多坑。

高端高校学过4个月画画,但未曾那地点自然,连轻便卡通动画也画不佳,于是在海外网站找来如下动画,利用它来做例子,并把这一次用 css3 完毕动画的原理分享给我们~

来自 dribbble 某位大师的文章,GIF图中一个小女孩抱着三头猫在奔跑,极度讨人喜欢,动作轻松,过渡自然。

动画设计 1

回到项目供给,要完结类似上航海用体育场面卡通人物跑步动画,深入分析结果如下:

1.跑步动画能够选取在分化的风貌

渴求人物的背景是晶莹的,图片保险高清,制止边缘杂边

2.跑步动画运动速度与动作成正比关系

人选跑步速度越快,肉体动掸越快;人物跑步速度为零时,身体动掸立时安歇在日前的事态

3.跑步动画效果流畅

不会产出卡顿现象

GIF完结跑步

用PS打开该大师的 GIF 图,在时刻轴窗口中有 24 张不相同的图纸,通过一帧一帧的广播来贯彻跑步动画,很轻易得表达做多个精制的卡通片供给多费点心思和劳力啊,向大师表示敬礼~

 动画设计 2

项目组供给的动画跟上图人物大小大致,一开首跟交互和视觉的同事批评时,尝试使用 gif 来达成动画,使用7张图片轮播,间隔 0.2 秒可知足的动画效果,轻松完毕如下:

动画设计 3

动画设计 4

分析下gif动画

利益:达成简单、可维护性高、专门的职业成本低

弱点:只符合不难的动画片效果,不可能动态调整动画

那么项目标硬性供给(调控动画的中止、速度等)让自家割舍了对gif完结跑步的主见~

CSS3贯彻跑步

扬弃了 gif,而 swf 亦非大家的选料,canvas 达成也是能够的,这里不做牵线,此次大旨是 css3 动画~

跑步动画的完成

艺术一:通过切换 7 张图纸来贯彻

@-webkit-keyframes charector-1{
    0% {background-image: url(charector_1.png);}
    14.3% {background-image: url(charector_2.png);}
    28.6% {background-image: url(charector_3.png);}
    42.9% {background-image: url(charector_4.png);}
    57.2% {background-image: url(charector_5.png);}
    71.5% {background-image: url(charector_6.png);}
    85.8% {background-image: url(charector_7.png);}
    100% {background-image: url(charector_1.png);}
}

艺术二:7 张图纸合成 1 张,通过切换背景图片地方来落实

动画设计 5

@-webkit-keyframes charector-1{
    0% {background-position: 0 0;}
    14.3% {background-position: -180px 0;}
    28.6% {background-position: -360px 0;}
    42.9% {background-position: -540px 0;}
    57.2% {background-position: -720px 0;}
    71.5% {background-position: -900px 0;}
    85.8% {background-position: -1080px 0;}
    100% {background-position: 0 0;}
}

分析这2种方式

方式一:

贯彻起来会相比较简单,但带来相当的 7 个央浼数

7 张图纸总大小为:50k

方式二:

亟待规划雪碧图,并量取背景地方,央求数少

7-Up图大小为:37k

可以看出多张图纸合成的Sprite图比 7 张图片还少 13k 外,还是能够减掉 7 个HTTP必要,那么切换背景地方情势是相比较好的,代码如下:

HTML:

<div class="charector"></div>

CSS:

.charector{
position: absolute;
width: 180px;
height: 300px;
background: url(../img/charector.png) 0 0 no-repeat;
-webkit-animation-name: charector-1;/* 动画名称 */
-webkit-animation-iteration-count: infinite;/* 动画无限播放 */
-webkit-animation-timing-function: step-start;/* 马上跳到动画每一结束桢的状态 */
-webkit-animation-duration: 950ms;/* 动画运行的时间 */
}
@-webkit-keyframes charector-1{
    0% {background-position: 0 0;}
    14.3% {background-position: -180px 0;}
    28.6% {background-position: -360px 0;}
    42.9% {background-position: -540px 0;}
    57.2% {background-position: -720px 0;}
    71.5% {background-position: -900px 0;}
    85.8% {background-position: -1080px 0;}
    100% {background-position: 0 0;}
}

demo,那边下载动画设计,(请使用 webkit 内核的浏览器张开)

增长速度跑步速度、暂停跑步的兑现

加快跑步速度:能够透过快捷切换背景图片地点,animation-duration 能够决定动画运转的时日,那么收缩动画的光阴能够升官跑步的快慢,通过在父级动态加载分歧的意义 class 来运作分裂的动画,进而改换跑步速度

动画设计 6

详尽内容请看代码,在意注释

HTML:

<div class="charector-wrap " id="js_wrap">
    <div class="charector"></div>
</div>

<a class="run-xfast" href="#none">最快</a>
<a class="run-fast" href="#none">快</a>
<a class="run-normal" href="#none">正常</a>
<a class="run-slow" href="#none">慢</a>
<button class="btn-paused">暂停</button>

CSS:

.charector{
position: absolute;
width: 180px;
height:300px;
background: url(../img/charector.png) 0 0 no-repeat;
-webkit-animation-iteration-count: infinite;/* 动画无限播放 */
-webkit-animation-timing-function:step-start;/* 马上跳到动画每一结束桢的状态 */
}
/* 跑步动画名称 */
@-webkit-keyframes person-xfast{/* 超快 */
    0% {background-position: 0 0;}
    14.3% {background-position: -180px 0;}
    28.6% {background-position: -360px 0;}
    42.9% {background-position: -540px 0;}
    57.2% {background-position: -720px 0;}
    71.5% {background-position: -900px 0;}
    85.8% {background-position: -1080px 0;}
    100% {background-position: 0 0;}
}
@-webkit-keyframes person-fast{/* 快 */
    0% {background-position: 0 0;}
    14.3% {background-position: -180px 0;}
    28.6% {background-position: -360px 0;}
    42.9% {background-position: -540px 0;}
    57.2% {background-position: -720px 0;}
    71.5% {background-position: -900px 0;}
    85.8% {background-position: -1080px 0;}
    100% {background-position: 0 0;}
}
@-webkit-keyframes person-normal{/* 正常 */
    0% {background-position: 0 0;}
    14.3% {background-position: -180px 0;}
    28.6% {background-position: -360px 0;}
    42.9% {background-position: -540px 0;}
    57.2% {background-position: -720px 0;}
    71.5% {background-position: -900px 0;}
    85.8% {background-position: -1080px 0;}
    100% {background-position: 0 0;}
}
@-webkit-keyframes person-slow{/* 慢 */
    0% {background-position: 0 0;}
    14.3% {background-position: -180px 0;}
    28.6% {background-position: -360px 0;}
    42.9% {background-position: -540px 0;}
    57.2% {background-position: -720px 0;}
    71.5% {background-position: -900px 0;}
    85.8% {background-position: -1080px 0;}
    100% {background-position: 0 0;}
}
/* 跑步动作频率控制 */
.xfast .charector{/* 超快 */
-webkit-animation-name: person-xfast;
-webkit-animation-duration: 500ms;
}
.fast .charector{/* 快 */
-webkit-animation-name: person-fast;
-webkit-animation-duration: 650ms;
}
.normal .charector{/* 正常 */
-webkit-animation-name: person-normal;
-webkit-animation-duration: 800ms;
}
.slow .charector{/* 慢 */
-webkit-animation-name: person-slow;
-webkit-animation-duration: 950ms;
}

停顿跑步:使用 animation-play-state:paused 可以暂停正在张开的动画,并滞留到当下的动作,那么当客户甘休操作时,给父级加上作用 class 来结束动画

动画设计 7

CSS:

/* 暂停动画 */
.paused .charector{
-webkit-animation-play-state:paused;
}

末尾再通过 js 调整不一致的跑动速度。

jQuery:

$(document).ready(function(){    
        $("a").on("click",function(e){
            $("#js_wrap").find(".charector-wrap").removeClass("paused");
            $("#js_wrap").attr("class","charector-wrap " + $(e.target).attr("class").split("-")[1])
        })
        $(".btn-paused").click(function(){
            $("#js_wrap").addClass("paused");
        })
    })

说起底分界面:

动画设计 8

demo,此地下载(请使用 webkit 内核的浏览器展开)

总结:

animation 相符绝对简便易行的卡通片,使用起来相比灵敏,如协助切换不相同的动画名、暂定动画等

animation-timing-function 的 step-start 属性等不完全协助 android 2.1~4.3 、ios 4.3 系统

 

ok~ 跑步动画到此甘休~

 

编辑:动画设计 本文来源:移动web动画设计的一点心得

关键词: