Animation animation skills and details you may not know

Author: Roman Arvin

introduction

In web applications, front-end students often use several schemes when realizing animation effects:

  1. css3 transition / animation - realize transition animation
  2. setInterval / setTimeout - continuously change the position of the image by setting an interval
  3. requestAnimationFrame - changes the image position through a callback function, and the system determines the execution time of this callback function. It has better performance than timing modification, and there is no frame loss

In most requirements, the transition / animation of css3 can meet our requirements, and compared with js implementation, it can greatly improve our development efficiency and reduce the development cost.

This article will focus on summarizing the use of animation. If you need more animation in your work, I believe this article can make you gain something:

  • Animation common animation attributes
  • Animation realizes uninterrupted broadcasting
  • Animation for rebound
  • Animation realizes the live broadcast like effect ❤️
  • What kind of spark will Animation and Svg make? 🔥
    1. Loading component
    2. Progress bar component
  • Animation steps() ⏰
    1. Achieve typing effect
    2. Draw frame animation

Animation common animation attributes

After introducing the common attributes of animation, in order to better understand and apply these attributes, we will implement some DEMO by hand

Animation realizes uninterrupted broadcasting

Realize uninterrupted broadcast DEMO

The broadcast effect is achieved by modifying the position of the y-axis of the content in the parent element

@keyframes scroll {
  0%{
    transform: translate(0, 0);
  }
  100%{
    transform: translate(0, -$height);
  }
}

.ul {
  animation-name: scroll;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* animation: scroll 5s linear infinite; Animation attribute abbreviation */
}

Here, in order to preserve the consistency of broadcast scrolling effect and prevent no content when scrolling to the last frame, it is necessary to add one more piece of duplicate data for filling

<div class="ul">
  <div class="li">Xiao Liu joined the lab</div>
  <div class="li">Xiao Deng joined the lab</div>
  <div class="li">Xiao Li joined the lab</div>
  <div class="li">Xiao Wang joined the lab</div>
    <!--   Insert data for filling -->
  <div class="li">Xiao Liu joined the lab</div>
</div>

Animation for rebound

By dividing the transition animation into multiple stages, the top attribute of each stage stays in different positions

Achieve rebound effect DEMO

/* Specify animation, change top,opacity */
@keyframes animate {
  0% {
    top: -100%;
    opacity: 0;
  }
  25% {
    top: 60;
    opacity: 1;
  }
  50% {
    top: 48%;
    opacity: 1;
  }
  75% {
    top: 52%;
    opacity: 1;
  }
  100%{
    top: 50%;
    opacity: 1;
  }
}

In order to make the transition effect more natural, a Bezier curve is defined through the cubic Bezier () function to control the animation playback speed

After the transition animation is executed, in order to apply the element to the attribute value of the last frame of the animation, we need to use animation fill mode: forwards

.popup {
  animation-name: animate;
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.21, 0.85, 1, 1);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  /* animation: animate 0.5s cubic-bezier(0.21, 0.85, 1, 1) 1 forwards; Animation attribute abbreviation */
}

Animation achieves the like effect Online Code

DEMO to achieve the like effect

I believe most students know the praise effect. This article will realize a simple version of the praise effect, mainly about the realization ideas:

  1. In order to offset the bubble upward, we need to implement an @ keyframes animation moving in the y-axis direction first
/* Specify the animation to change the y-axis offset distance*/
@keyframes animation-y {
  0%{
   transform:  translate(-50%, 100px) scale(0);
  }
  50%{
   transform:  translate(-50%, -100px) scale(1.5);
  }
  100%{
    transform:  translate(-50%, -300px) scale(1.5);
  }
}
  1. In order to make the bubble appear less monotonous when it moves upward, we can realize another @ keyframes animation moving in the x-axis direction
/* Specify the animation to change the x-axis offset distance */
@keyframes animation-x {
  0%{
    margin-left: 0px;
  }
  25%{
    margin-left: 25px;
  }
  75%{
    margin-left: -25px;
  }
  100%{
    margin-left: 0px;
  }
}

Here I understand:

  • Although the offset distance of the x-axis is changed by modifying the margin, there is not much performance difference between modifying the transform and modifying the margin
  • Because a new render layer has been created through the transform in @ keyframes animation-y
  • The animation attribute allows the rendering layer to be promoted to the compositing layers and have a separate graphics layer, that is, the hardware acceleration is turned on and the paint and layout of other rendering layers will not be affected
  • Students who don't know much about compositing layers can read this article Analysis of css3 dynamic optimization principle from browser rendering level
  • As shown in the figure below:

If the author's understanding here is wrong, please also point out that the reader's boss is very grateful~

  1. Apply the two @ keyframes animations we have implemented to the bubble
.bubble {
  animation: animation-x 3s -2s linear infinite,animation-y 4s 0s linear 1;
/*  Turn on hardware acceleration for bubble */
}
  1. In the like event, add / remove bubble elements dynamically through js operation
function like() {
  const likeDom = document.createElement('div');
  likeDom.className = 'bubble'; // Add style
  document.body.appendChild(likeDom);  // Add element
  setTimeout( () => {
    document.body.removeChild(likeDom);  // Removing Elements 
  }, 4000)
}

Animation and Svg draw loading / progress bar components 🔥 Online Code

Animation and Svg draw loading / progress bar components 🔥 DEMO

  1. First, we use svg to draw a circle with a circumference of 2 * 25 * PI = 157
<svg with='200' height='200' viewBox="0 0 100 100"  >
  <circle cx="50" cy="50" r="25"  fill="transparent" stroke-width="4" stroke="#0079f5" ></circie>
</svg>

  1. Draw the solid line circle into a dotted line circle. Here, you need to use the attribute of stock dasharray: 50, 50 (which can be abbreviated as 50) to draw the dotted line, Stock dasharray reference
  • Its value is a sequence of numbers separated by commas or blanks, specifying the length of dashes (50px) and gaps (50px).
  • Because 50 (DASH) + 50 (notch) + 50 (DASH) = 150, 150 < 157, a complete circle cannot be drawn, so there will be a notch (7px) on the right
<svg with='200' height='200' viewBox="0 0 100 100"  >
  <circle cx="50" cy="50" r="25"  fill="transparent" stroke-width="4" stroke-dasharray="50" stroke="#0079f5" ></circie>
</svg>

  1. The stroke dashoffset attribute can offset the dash line and notch of the circle. Adding @ keyframes animation can achieve the effect from scratch, Stock dashoffset reference
  • Set stroke dasharray = "157" to specify the length of dash (157px) and notch (157px).
  • Add @ keyframes animation and modify the stroke dashoffset value. When the value is positive, it will be offset counterclockwise 🔄,, When the value is negative, it is offset clockwise 🔃
@keyframes loading {
  0%{
    stroke-dashoffset: 0;
  }
  100%{
    stroke-dashoffset: -157; /* Line clockwise offset */
  }
}
circle{
    animation: loading 1s 0s ease-out infinite;
}

  1. Modify dash and notch values
  • To make the loading component lines visible, we need a 50px dash line and set stroke dasharray = "50"
  • In order to make the dash line disappear completely after offset, the notch needs to be greater than or equal to the circumference 157. Set stroke dasharray = "50 157"
  • Add @ keyframes animation. In order to process the start position of the animation at the end of the animation, you need to modify stroke dashoffset: - 207 (DASH + notch length)
  • The progress bar is a similar principle to help understand the stroke dashoffset attribute. Please check the specific implementation Examples
@keyframes loading {
  0%{
    stroke-dashoffset: 0;
  }
  100%{
    stroke-dashoffset: -207; /* Ensure that the start position of the animation is still processed at the end of the animation */
  }
}
circle{
    animation: loading 1s 0s ease-out infinite;
}

Animation steps()

steps() is the attribute value of the animation timing function

animation-timing-function : steps(number[, end | start])
  • The steps function specifies a step function that accepts two parameters
  • The first parameter accepts an integer value, indicating that the two keyframes are completed in several steps
  • The second parameter has two values, start or end. The default value is end
  • Step start is equivalent to step(1, start). Step end is equivalent to step(1, end)

steps is applicable to key frame animation. The first parameter subdivides two key frames into N frames, and the second parameter determines whether the interval from one frame to another is filled with start frame or end frame.

Looking at the figure below, you can find:

  • steps(N, start) divides the animation into n segments. The animation takes a step at the beginning of each segment (i.e. hollow circle → solid circle in the figure), and stops at frame N at the end of the animation
  • steps(N, end) divides the animation into N segments. The animation takes a step at the end of each segment (i.e. hollow circle → solid circle in the figure). At the end of the animation, frame N has been skipped (i.e. hollow circle → solid circle in the figure) and stayed in frame N+1.

Practice makes true knowledge!

Animation achieves typing effect

Animation realizes typing effect DEMO

  • I'm an O2man For example, there are 13 characters in total. [tested, most Chinese fonts have the same width and height of each character]
  • steps(13) can divide the @ keyframes animation into 13 stages, and the running distance of each stage is equal.

The effect is as follows:

/* Change container width */
@keyframes animate-x {
  0%{
    width: 0;
  }
}

p {
    width: 125px;
    overflow: hidden;
    border-right: 1px solid transparent;
    animation: animate-x 3s 0s steps(13) 1 forwards;
}
  • It can be found that this is not enough. Characters are truncated during the animation operation. In order to ensure that the characters of the current stage can be displayed accurately after each stage, we also need to ensure that the width of each character is equal to the distance between each stage of the animation
  • Set the Monaco font property to ensure that the width of each character is the same. The specific pixels are affected by the fontSize property. The font width in the example is about 9.6px, 9.6px * 13 (number of segments) = 124.8px (125px). Therefore, when we set the container width to 125px, we can achieve the goal: the width of each character is equal to the running distance of each stage of the animation (about 9.6px).
p {
    /* Set the Monaco font attribute. The font size is 16px to ensure that the width of each character is the same. The width is about 9.6p */
    font-family: Monaco;
    /* 9.6px * 13 = 124.8px (125px) */
    width: 125px ;
    font-size: 16px;
    overflow: hidden;
    border-right: 1px solid transparent;
    /* Apply animation animation-x and cursor-x at the same time */
    animation: animate-x 3s 0s steps(13) 1 forwards,cursor-x 0.4s 0s linear infinite;
}

Animation realizes frame animation ⏰

Animation realizes frame animation ⏰ DEMO

  • Here we got a picture of frame 47 css spirit , set the background image
.main {
  width: 260px;
  height: 200px;
  background: url(url) no-repeat;
  background-size: 100%;
  background-position: 0 0;
}
  • Add @ keyframes and modify the background position to make the background image move
@keyframes animate {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 100%;
    }
}
.main{
  width: 260px;
  height: 200px;
  background: url(url) no-repeat;
  background-size: 100%;
  background-position: 0 0;
  animation: animate 2s 1s steps(47) infinite alternate;
}
  • At the same time, css also provides animation play state to control whether the animation is paused
input:checked+.main{
    animation-play-state: paused;
}

The article is long. Thank you for reading. I hope you can gain something ~ ~~

reference material

Animation common animation attributes CSS reference manual steps() reference Detailed explanation of stroke dasharray and stroke dashoffset in SVG learning
Understand the steps() in CSS3 Animation
A detailed explanation of the usage of steps() in css animation
CSS Will Change

Welcome to the lab blog: aotu.io

Or follow AOTULabs official account and push articles from time to time:

Posted by heminfotech on Tue, 10 May 2022 05:28:08 +0300