The theme

  • Animation implementation
  • Implement the animation tool plug-in
  • Animation performance

Animation implementation

The front end implements animations in several ways

  • GIF –> SVG –> Canvas animation

  • Css3 animation properties

    • transition (vue-transition )
    • animation

  • video

  • Swiper and other systems to achieve a sliding wheel seeding plug-in

See whether there is a kind of empathy above, before are more or less contact. Now, the concept of animation.

Concept: video, cartoon, GIF, GIF, APNG and other moving pictures are animation, color height position (displacement) and other attributes change (transition) are animation.

Thus, in the front-end development, the realization or classification of animation: transition animation, frame animation

Dynamic figure

  • GIF,

  • APNG (IOS 8+, Chrome 59+),

  • WebP (Animation Support Chrome 32+)

  • Video Files for WebM (Chrome 29+)

From the above files to SVG animation specific implementation can refer to the example

  • Set to modify a property value after a specified time
  • Basic Animation Elements
  • color
  • implementationtransformTransform the animation effect
  • You can have various SVG graphics along a specificpathPath to the movement

Canvas, as a new element of H5, is an example of realizing animation through Web API

transition

Transitions can define different transitions for an element as it switches between different states. Such as switching between pseudo-elements such as :hover, :active or state changes implemented through JavaScript.

  • Transition-property Specifies the property to be transformed.
  • Transition-duration Duration of transformation;
  • Transition-timing-function Time curve;
  • The transition – delay delay.
<div class="box"></div>

 .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    /* transition: width 2s linear; * /
    transition: transform 2s ease-in-out;   
  }
  .box:hover {
      /* width: 500px; * /
      transform: rotate(45deg);
    }
Copy the code
animation
  • Animation-name Specifies the name of the animation.
  • Animation-duration Specifies the duration of the animation.
  • Animation-timing-function Time curve of the animation;
  • Animation-delay Indicates the delay before the animation starts.
  • Animation-rotund-count Specifies the number of times an animation is played;
  • Animation-direction Specifies the direction of the animation
  • Animation-fill-mode Specifies the style to be applied to the element when the animation is not playing (when the animation is finished, or when the animation has a delay before it starts playing)
/* animation: name duration timing-function delay iteration-count direction fill-mode; * /<div
class="itemPic"
>
  <div class="imgWrap">
    <img :src="imgItem.logo" alt="">
      </div>
</div>

.itemPic {
  cursor: pointer;
  width: 200px;
  height: 80px;
  background: #ffffff;
  border-radius: 4px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.itemPic:after{
 animation: progress 500ms;  
}

@keyframes progress
   0%   { padding-right: 100%; }
  20%  { padding-right: 90%; }
  30%  { padding-right: 50%; }
  40%  { padding-right: 30%; }
  90%  { padding-right: 1%; }




Copy the code
Time function (Bezier curve)

cubic-bezier(x1, y1, x2, y2); This can be fine-tuned in a browser or generated using the Flow plug-in.

Some common plug-ins
  • vue-transition
  • swiper
  • Animate.css
  • Time function – Steps (12) Non-linear function, Bezier curve
video
<div class="videoWrap"> <video class="video" id="myVideo" autoplay="autoplay" loop="loop" muted="muted" AspectRatio ="2.7:1" preload="auto" controlsList="nodownload"> <source: SRC ="studioVideo"> </video> </div> @media only screen and (max-width: 2000px) .videoWrap position absolute z-index -1 width 100% height 100% min-width 1400px height 850px display flex justify-content center align-items center .video width 100% height 100% object-fit cover @media only screen and (min-width: 2000px) .videoWrap position absolute z-index -1 width 100% height 100% min-width 1400px height 850px display flex justify-content center align-items center background-image url('.. PNG ') background-repeat no-repeat background-size 100% 100%. Video width 100% height 100% object-fit containCopy the code

The above is the simple usage of video. It can be used together with the @media element of CSS to deal with the problem that the video is not in full screen in the case of broadband. The objCT-Fit and aspectRatio properties of the video display the ratio of the screen to the compression stretch of the video.

Animation performance

performance