Year-end activity H5 animation summary

Stamp – came – making – here

Css3 + react-id-swiper + React + redux + Saga The postCSS Autoprefixer plugin can meet most opPO and Vivo phone compatibility problems.

1. Main contents related to animation:

  1. A shooting star
  2. Flashing stars
  3. Word of shaking
  4. Human movement (animation + monitor animation end time)
  5. Bridge of bedding
  6. Enable the journey button zoom
  7. Rotation (+ compatible)
  8. react-id-swiper
  9. Swiper works with CSS3 for switchover

Css3 animation syntax

  • animation
Animation-name animation-duration animation-timing-function Speed curve animation-delay animation-iteration-count animation-direction play-state fill-modeCopy the code
  • transform

The transform property applies 2D or 3D transformations to elements. This property allows you to rotate, scale, move, or tilt elements. Transform-origin (the attribute changes the center of the transformed element).

  • transition

Animation, keyframe, repetition. Transition, attribute, trigger action, transient. Transform, complex transform parameters.

Example 3.Github.com/hytStart/Re…

  • A shooting star

Change position translate3D, opacity and size scale. The tail of the meteor uses pseudo-element elements :after rotated -45deg(rotated base to left transform-origin: left;) ; Border can be achieved, near the head of the lighter, near the tail of the darker.

.star {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FFF;
    top: 10px;
    left: 200px;
    position: relative;
    animation: star-ani 6s infinite ease-out;
    box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
    opacity: 1;
}
.star:after {
    content: ' ';
    display: block;
    top: 0px;
    left: 40%;
    border: 0px solid #fff;border-width: 0px 90px 2px 90px; border-color: transparent transparent transparent rgba(255, 255, 255, .3); transform: rotate(-45deg) translate3d(1px, 3px, 0); box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1); transform-origin: left; } @keyframes star-ani { 0% { opacity: 0; transform: scale(0) rotate(0) translate3d(0, 0, 0); } 50% { opacity: 1; transform: scale(1) rotate(0) translate3d(-100px, 100px, 0); } 100% { opacity: 0; transform: scale(1) rotate(0) translate3d(-200px, 200px, 0); }}Copy the code
  • Flashing stars

Change transparency

.shine {
    background: url('.. /.. /.. /.. /images/action/icon-star1.png') no-repeat center; background-size: 100%; width: 30px; height: 40px; position: absolute; top: 90px; left: 100px; opacity: 0; Animation: animation-change 0.5s ease-in-out infinite; } @keyframes opacity-change { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; }}Copy the code
  • word

Divided into two animations, falling and rising. TranslateY changes.

.text-item-0 {
    position: absolute;
    width: 25px;
    height: 75px;
    top: 60px;
    left: 100px;
    background: url('.. /.. /.. /.. /images/action/S-start.png') no-repeat center; background-size: 100%; Animation: letter-0 1.5s ease-in-out both, letter-0-1 2.0s ease-in-out 1.5s both; } @keyframes letter-0 { 0% { transform: translateY(0) } 50% { transform: translateY(80px) } 100% { transform: translateY(0px) } } @keyframes letter-0-1 { 0% { opacity: 1; } 100% { top: -80px; opacity: 0; }}Copy the code
  • People move

Toggle dom, add classes to control movement and pausing, and toggle background characters. Listen for the AnimationEnd event.

jsx
{
    peopleMove ?
        <div
            className={`${style.people_move} The ${! pausedState && style.people_paused}`}
            ref={start2 => { this.start2 = start2 }}
        />
        :
        <div className={style.people} />
}
css
.people {
    width: 20px;
    height: 64px;
    position: absolute;
    left: 10px;
    top: 130px;
    background: url('.. /.. /.. /.. /images/action/people.png') no-repeat center;
    background-size: 100%; 
    opacity: 0;
    animation: peopleUp 1s ease-in-out 0.5s both;
}
.people_move {
    background: url('.. /.. /.. /.. /images/action/people_moveleft.gif');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 20px;
    height: 64px;
    position: absolute;
    left: 10px;
    top: 130px;
    opacity: 1;
    animation: PeopleMove 1.5s linear 0s both;
}
.people_paused {
    width: 20px;
    height: 64px;
    background: url('.. /.. /.. /.. /images/action/people.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; animation-play-state: paused; } @keyframes peopleUp { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes PeopleMove { 0% { left: 10px; top: 130px; } 100% { top: 20px; left: 180px; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }} // Listen for the end of the animationcomponentDidUpdate() {
    const { peopleMove } = this.state
    if (peopleMove) {
        this.start2.addEventListener('animationend', this.end)
        this.start2.addEventListener('webkitAnimationEnd', this.end)
        this.start2.addEventListener('mozAnimationEnd', this.end)
        this.start2.addEventListener('oAnimationEnd', this.end)
    }
}
Copy the code
  • The emergence of the bridge

Cooperate with the background – size: cover; Property implementation.

.brige {
    width: 0px;
    background: url('.. /.. /.. /.. /images/action/bridge.png'); background-size: cover; background-repeat: no-repeat; height: 100px; position: absolute; top: 40px; left: 30px; animation: BridgeFadeIn 3s linear both; opacity: 0; } @keyframes BridgeFadeIn { 0% { width: 0px; opacity: 0; } 100% { width: 200px; opacity: 1; }}Copy the code
  • Gradient big (start the journey)

Scale the transform using Transform scale2D.

.icon-ciecle {
    display: block;
    position: absolute;
    left: 100px;
    top: 80px;
    width: 30px;
    height: 30px;
    background: url('.. /.. /.. /.. /images/action/icon-light.png') no-repeat center; background-size: 100%; Animation: warn 1.2s ease-in-out 0s infinite both; } @keyframes warn {0% {transform: scale(0.1); Opacity: 0.0; } 25% {transform: scale(0.2); Opacity: 0.3; } 50% {transform: scale(0.4); Opacity: 0.5; } 75% {transform: scale(0.6); Opacity: 0.7; } 100% {transform: scale(0.8); Opacity: 0.0; }}Copy the code
  • rotating

Ios animation – play – state: paused; Does not work, and an animation cannot be written to a new class. It must be written to a class. (In testing, there’s a question mark.)

.music_img { width: 40px; height: 40px; display: block; position: absolute; left: 100px; top: 80px; animation: rotating 3s linear infinite; animation-play-state: running; } .rotate-pause { animation-play-state: paused; } @keyframes rotating { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}Copy the code
  • react-id-swiper

Swiper react version, basic API support, with experimental visual equivalent to Swiper V4.

  1. Not necessarily through an API. You can also do this by rewriting CSS.
  2. Overwriting the CSS toggle effect will affect the animation effect itself, so it can be controlled by adding not sliding.
1.. swiper-wrapper {transition-delay: 1.6s; } 2. noSwiping:true,
noSwipingClass: 'stop-swiping'.Copy the code
  • Swiper implements maze switching

1. The effect property of swiper controls opacity of background picture, and the time difference is used to achieve the final effect. Including maze switching, backpack man appear and disappear, pop-ups appear and disappear. 2. Swiper property activeIndex, you can get the slide to the page, by changing the DOM or changing the class, control the page animation.

// According to the number of pages obtained by activeIndex, control the change of the page state, by switching dom and adding classes, to achieve the entry and exit animation effect. // Add the stop-swiping class. Swiping cannot be swiped until the animation is complete. const mazeStyle = classNames({ [styles['maze-1']] :true,
    [styles['maze-out']]: firstMazeOut,
})
const peopleStyle = classNames({
    [styles['people-1']] :true,
    [styles['people-out']]: firstMazeOut,
})
const popCardStyle = classNames({
    [styles['pop-card-container']] :true,
    [styles['pop-card-out']]: firstMazeOut, }) { firstMazeIn ? <div className={! isSlideFirst &&"stop-swiping"}>
            <div className={styles['maze-container']}> <div className={mazeStyle} /> <div className={peopleStyle} /> </div> <div className={popCardStyle}> <ModalScene {... This. Props} /> </div> </div> : <div />Copy the code

4. Animation summary

Opacity and translate are also best written by others.

5. To be perfect

  • html2canvas
  • Resource to load
  • Use and precautions of JsBridge