This is the 8th day of my participation in the August More Text Challenge

Background demand

The result is shown below: Develop a dynamic effect that rotates along an elliptical trajectory

Design and dismantling

Div blocks are superimposed, with a ball moving along an elliptical trajectory and a twinkling ball as the base image below.

code

First let’s understand the syntax of animation (screenshot from W3CSchool)

A little ball that twinkled

First of all to achieve a simple dot flashing, REM is the project needs, copy code can be directly multiplied by 100 to PX.

Animation: animOpa 0.5s infinite Linear;

Infinite indicates an infinite number of plays. This parameter can be filled with the sub-value of the group.

Linear means that the speed of the animation is the same from beginning to end

0.5s indicates the time set for a period of animation playback

AnimOpa is a custom KeyFrams where 0% means start and 100% means end.

Opacity here means that the transparency changes uniformly from 0 to 1. This process is completed once within 0.5 seconds and repeated for unlimited times.

The rest of the CSS mainly implements the small ball style

<template>
  <div class="areaNamePanel">
    <div class="opacityBall"></div>
  </div>
</template>
<script>
export default {
  name: 'MapMarkerAnim'.data() {
    return{}}}</script>
<style lang="less" scoped>
@keyframes animOpa {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1; }}.areaNamePanel {
  height: 0.144 rem;
  width: 0.4416 rem;
  transform: translate(-50%, -0.3072 rem);
  .opacityBall {
    position: absolute;
    width: 0.048 rem;
    height: 0.048 rem;
    left: 0.0432 rem;
    top: 0.12 rem;
    box-shadow: 0px 0px 8px #ff6000;
    border-radius: 8px;
    background-color: #f8cc03;
    animation: animOpa 0.5 sinfinite linear; }}</style>
Copy the code

A small round ball moving in an elliptical trajectory

The key code

animation: animX 2s cubic-bezier(0.36.0.0.64.1) -1s infinite alternate,
      animY 2s cubic-bezier(0.36.0.0.64.1) 0s infinite alternate,
      scale 4s cubic-bezier(0.36.0.0.64.1) 0s infinite alternate;
Copy the code

Cubic bezier(0.36, 0, 0.64, 1)

The ellipse consists of three elements: three Bezier curves + left-right movement delay minus one second +scale is x+y total time. Scale is mainly to have a more three-dimensional sense of vision, near big far small.

The complete code

<template>
  <div class="areaNamePanel">
    <div class="animatianBall"></div>
    <div class="opacityBall"></div>
  </div>
</template>
<script>
export default {
  name: 'MapMarkerAnim'.data() {
    return{}}}</script>
<style lang="less" scoped>
@keyframes animX {
  0% {
    left: 0px;
  }
  100% {
    left: 0.4416 rem; }}@keyframes animY {
  0% {
    top: 0px;
  }
  100% {
    top: 0.144 rem; }}@keyframes scale {
  0% {
    opacity: 0.1;
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.1;
    transform: scale(0.7); }}@keyframes animOpa {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1; }}.areaNamePanel {
  height: 0.144 rem;
  width: 0.4416 rem;
  transform: translate(-50%, -0.3072 rem);
  .animatianBall {
    position: absolute;
    width: 0.048 rem;
    height: 0.048 rem;
    box-shadow: 0px 0px 8px #ff6000;
    border-radius: 0.064 rem;
    background-color: #f8cc03;
    animation: animX 2s cubic-bezier(0.36.0.0.64.1) -1s infinite alternate,
      animY 2s cubic-bezier(0.36.0.0.64.1) 0s infinite alternate,
      scale 4s cubic-bezier(0.36.0.0.64.1) 0s infinite alternate;
  }
  .opacityBall {
    position: absolute;
    width: 0.048 rem;
    height: 0.048 rem;
    left: 0.0432 rem;
    top: 0.12 rem;
    box-shadow: 0px 0px 8px #ff6000;
    border-radius: 8px;
    background-color: #f8cc03;
    animation: animOpa 0.5 sinfinite linear; }}</style>

Copy the code