A little experience in mobile web animation design--CSS3 to achieve running

This March, due to the company's business needs, I transferred to the product department, left the TID team, people are emotional animals, not to mention in a team to stay fast for 3 years, the heart is very reluctant, ghost brother said "the world is not a feast ...", in my world there is another sad (although still work in the next door). After joining the product center, start a new team life, work more busy than before, sometimes Saturday to work, need to complete tasks faster and more efficiently, in addition to refactoring the page, you need to actively participate in the work outside the edge, assume more. Recently busy, give yourself a ring Bell: pay attention to the body.

Finish off the topic, start the recent theme animation design. Although CSS3 Animation basic knowledge has been studied, but the previous project use less scenes, and not too much practice, to join the new team, do a few projects with the animation, try to use CSS3 to achieve, the process encountered a lot of pits.

University study for one months painting, but no such talent, even simple cartoon animation is not good, so in the foreign web site to find the following animation, use it to do examples, and this time with the CSS3 realization of the principle of animation to share to everyone ~

From the works of a master in Dribbble, a little girl in a GIF with a cat running, very cute, lightweight, transition nature.

Back to the project needs, to achieve similar cartoon character running animation, the analysis results are as follows:

1. Running animations can be used in different scenarios

Requires the background of the person is transparent, the picture guarantees the HD, avoids the edge miscellaneous edge

2. Running animation speed and action proportional to the relationship

The faster the character runs, the faster the body moves; the character is running at zero, and the body action stops at the current state immediately.

3. Smooth running animation effect

There will be no Dayton phenomenon

GIF for running

Using PS to open the master's GIF, in the Timeline window has 24 different pictures, through a frame of the play to achieve the running animation, it is very simple to make a fine animation need to pay more attention to the mind and Labor ah, to the Master salute ~

The animation required by the team is about the size of the character, and when it starts with the interactive and visual colleagues, try to use GIF to animate, using 7 pictures to carousel, 0.2 seconds to meet the animation effect, the simple implementation of the following:

Analyze the GIF animation

Benefits: Simple implementation, high maintainability, low operating costs

Cons: only suitable for simple animation effect, cannot animate animation

So the hard requirements of the project (Control animation pause, speed, etc.) let me give up the idea of running in GIF ~

CSS3 for running

Give up GIF, and SWF is not our choice, canvas implementation is also possible, here do not introduce, this theme is CSS3 animation ~

the realization of running animation

Mode one: By switching 7 pictures to achieve

@-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);}}

Mode two: 7 pictures synthesized 1, by switching the background image position to achieve

@-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;}}

Analysis of these 2 ways

Way One:

It's easier to implement, but it brings an additional 7 requests

7 Pictures Total size: 50k

Way two:

Need to design sprite chart, and take the background position, the number of requests less

Sprite Chart Size: 37k

You can see that more than 7 pictures of the sprite image is less than 13k, but also can reduce the 7 HTTP requests, the switch background position is better , the code is as follows:

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;/* animation name */-webkit-animation-iteration-count: infinite;/* animation Infinite Play */-webkit-animation-timing-function:step-start;/* jump to the state of each end frame of the animation */-webkit-animation-duration: 950ms;/* Animation run time */}@-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, download here (please open using the WebKit kernel browser)

Speed up your running and pause your running

Speed up your running: You can quickly change the position of the background image,animation-duration can control the time the animation runs, then reduce the animation time can increase the speed of running, by dynamically loading the different function class at the parent level To run different animations to change the speed of your running

See the code for details, note the comments

Html:

<div class= "Charector-wrap" id= "Js_wrap" >    <div class= "Charector" ></div></div><a class= "Run-xfast" href= "#none" > Fastest </a><a class= "run-fast" href= "#none" > Fast </a><a class= " Run-normal "href=" #none "> Normal </a><a class=" Run-slow "href=" #none "> Slow </a><button class=" btn-paused "> Pause </button>

Css:

. Charector{position:absolute;width:180px;height:300px;background:url (.. /img/charector.png) 0 0 no-repeat;-webkit-animation-iteration-count:infinite;/* Animation unlimited playback */-    webkit-animation-timing-function:step-start;/* immediately jumps to the state of each end frame of the animation */}/* running animation name */@-webkit-keyframes person-xfast{/* super 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-fast{/* 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{/* 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{/* 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;}} /* Run Action Frequency control */.xfast. charector{/* super fast */-webkit-animation-name:person-xfast;-webkit-animation-duration:500ms;}. Fast charector{/* */-webkit-animation-name:person-fast;-webkit-animation-duration:650ms;}. Normal. charector{/* regular */-webkit-animation-name:person-normal;-webkit-animation-duration:800ms;}. Slow. charector{/* slow */-webkit-animation-name:person-slow;-webkit-animation-duration:950ms;}

Pause running: Use animation-play-state:paused to pause the animation in progress and stay on the current action, then Add the function class to stop the animation when the user stops the operation

Css:

/* Pause animation */.paused. charector{-webkit-animation-play-state:paused;}

Finally, through the JS control different running speed.

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 ");})    

Final interface:

Demo, download here (please open using the WebKit kernel browser)

Summarize:

Animation is suitable for relatively simple animation, use more flexible, such as support to switch between different animation names, tentative animation and so on.

Animation-timing-function's Step-start attribute is not fully supported for Android 2.1~4.3, ios 4.3 systems

Ok~ running animation to this end, the next issue of an animation to remove the envelope, please look forward to ~

A little experience in mobile web animation design--CSS3 to achieve running