Vue Implementation code to make elements jitter/swing

First show the effect, click hard/vue-component/dist/

Code github:/zhangKunUserGit/vue-component

Let me first talk about the usage:

&lt;jitter :="Jump Controller" :range="{ Includex,y, z }" :shift-percent="0.1"&gt;
 Here are the elements you want to shake
&lt;/jitter&gt;

Ideas:

1. Shaking means swinging, and the pendulum in reality can be very vivid.

2. When the swing reaches the critical point, it will swing in the opposite direction.

3. When there is no power, the swing will slowly stop.

Initialize jitter:

/**
  * Initialize jitter
  */
initJitter() {
 // Turn start to false to facilitate next click this.$emit('update:start', false);
 // Clear the last animation ();
 // Set currentRange to fill items that are not in  = ({}, { x: 0, y: 0, z: 0 }, );
 // Get the items to be operated and the amount of swing required each time const { position, shiftNumber } = ();
  = position;
  = shiftNumber;
 // The initial move start point is 0  = { x: 0, y: 0, z: 0 };
 // Initially clockwise  = true;
 // Execute animation  = ();
},

Here is the work before the animation begins.

Execute animation:

// Continuous shakingcontinueJitter() {
 ( ? -1 : 1);
 // Absolute value const absMove = ();
 const currentRange = ;
 let changeDirection = false;
 for (let i = 0, l = , p; i &lt; l; i += 1) {
 p = [i];
 // Determine whether the critical value has reached. After reaching, the animation should be executed in the opposite direction. if (currentRange[p] &lt;= absMove[p]) {
  // Equal proportional reduction  [p] -= [p];
  //Judge if you have no power to swing again, let the swing stop. As long as one value reaches 0, all will reach  if ([p] &lt;= 0) {
  // Stop at the start point  ({ x: 0, y: 0, z: 0 });
  // Clear animation  ();
  return;
  }
  // Update move to the critical point  [p] =  ? -[p] : [p];
  // Change the direction of swing  changeDirection = true;
 }
 }
 if (changeDirection) {
 // Reverse the swing direction  = !;
 }
 // Update element position ();
 // Continue to execute the animation  = ();
},

Execute the animation. After judging that it is powerless to swing, let the element return to its original position and clear the animation.

Modify element position:

/**
  * Modify element position
  * @param x
  * @param y
  * @param z
  */
jitterView({ x = 0, y = 0, z = 0 }) {
 this.$ = `translate3d(${x}px, ${y}px, ${z}px)`;
},

Is it necessary to judge here that the Z-axis swing is required? When needed, you must add perspective to the parent of the current element to modify the child perspective effect

mounted() {
 // If you want to execute z-axis animation, you need to set the parent to modify the child perspective effect, otherwise the Z-axis has no effect if ( &gt; 0) {
 const parentEl = this.$;
 ().forEach((key) =&gt; {
  [key] = [key];
 });
 }
},

Finally, let’s take a look at the properties that can be passed:

props: {
 // Jitter range, unit is px, for example: {x: 4, y: 2, z: 10} range: {
 type: Object,
 default: () =&gt; { return { z: 8 }; },
 },
 start: {
 type: Boolean,
 required: true,
 },
 shiftPercent: {
 type: Number,
 default: 0.1, // Percentage of initial value in moving range },
 perspectiveStyle: {
 type: Object,
 default: () =&gt; {
  return {
  perspective: '300px',
  perspectiveOrigin: 'center center'
  };
 }
 }
},

The above are attributes that can be passed on, and you can modify them according to the situation.

at last:

Here I only wrote simple animations, which can also be modified according to different situations to achieve the desired effect. The effect of jitter in the input box has been met.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.