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

☆☆☆ Today’s learning content: (motion function encapsulation)! Important! Do do do

Can serve as a beginner’s learning route, can refer to, learning progress is not particularly driven! Ongoing update

Combined with their own understanding, simple and comprehensive summary of the basic knowledge points in the process of learning JavaScript in vernacular Chinese, easy to deepen understanding!

Let’s get started! ‘Only a firm foundation can build a tall building ‘! Come on! Take it seriously!

1, comb and review the knowledge points yesterday

  • 1. Strict mode"use strict"Variable definitionsvarOctal disabled functions must be declared at the top argumentsAnd parameters
  • 2, let keyword block level scope {}
  • 3, Change this to:bind()   apply()  call()
  • 4,for  of   和 for  in
  • 5. Define constant keywordsconst
  • 6. Deconstruct assignment[] {}
  • String template${variable or function}
  • Arrow function() = > {}     (a,b)=>{ return a + b }
  • 9, will havelengthProperty to an arrayArray.from
  • 10,setCollections are automatically de-duplicated without type cast array de-duplicatedArray. The from (new Set ([8,8,8]))     [...new Set([])]     MapA collection ofvar map = new Map()     map.set("name","jack")
  • 11, Symbol type
      var name = Symbol(a);varJson = {sex:""
      }
      json[name] = "lichune"
Copy the code

Motion function encapsulation

  • // obj operation element
  • // json parameters are the property to operate on and the target value key — property value — target value
  • // callback callback function
  • // Flag Switch variable When the value is true, it indicates that all actions are completed. You can turn off the timer or enter the next action
var flag // When the value of switch variable is true, it indicates that all actions have been completed, and the timer can be turned off or the next action can be entered
function startMove(obj, json, callback) {
  //attr indicates the attribute to operate on
  clearInterval(obj.timer)
  obj.timer = setInterval(function () {
    flag = true
    var current = 0
    for (var attr in json) {
      if (attr == 'opacity') {
        // Operation transparency
        // Gets the style value for transparency
        current = parseFloat(getStyle(obj, attr)) * 100
      } else if (attr == 'zIndex') {
        current = parseInt(getStyle(obj, attr)) // Receives the style value of the current element
      } else {
        current = parseInt(getStyle(obj, attr)) // Receives the style value of the current element
      }
      var speed = (json[attr] - current) / 10
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
      if(current ! = json[attr]) {// The condition after the action is completed
        flag = false // If the target value is not equal to the current style value, the switch variable value is turned off false
      } // The timer keeps changing the style of the element while it is on
      if (attr == 'opacity') {
        obj.style.opacity = (current + speed) / 100
      } else if (attr == 'zIndex') {
        obj.style.zIndex = json[attr]
      } else {
        obj.style[attr] = current + speed + 'px'}}// Check the value of flag at the end of the loop. When the value is true, it indicates that all actions are completed. You can turn off the timer or enter the next action
    if (flag) {
      clearInterval(obj.timer) // If the last action is completed, the next action is executed
      if (callback) {
        callback()
      }
    }
  }, 30)}Copy the code

Gets the style value function

function getStyle(obj, attr) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(obj, false)[attr]
  } else {
    return obj.currentStyle[attr]
  }
}
Copy the code

Sports leads to

Uniform motion — cushioning motion — multi-object motion — chain motion — perfect motion

Parabolic motion, circular motion

Multi-object motion – need to have their own timer, do not interfere with each other

Buffering motion — speed is variable:

Application: The application on the rotation chart.

Principle:

var speed = (target - oDiv.offsetLeft) / 10
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
Copy the code

Multi-object motion: The key is to keep each object moving independently of the timer without interfering with each other

Solution: Add an attribute to each moving object. The value of the attribute is a timer

Multi-object motion function encapsulation:

function move(obj, target) {
  clearInterval(obj.timer)
  obj.timer = setInterval(function () {
    var speed = (target - obj.offsetLeft) / 8
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
    if (target == obj.offsetLeft) {
      clearInterval(obj.timer)
    } else {
      obj.style.left = obj.offsetLeft + speed + 'px'}},30)}Copy the code

Getting non-line element style values > Compatibility problem <

function getStyle(obj, attr) {
  return window.getComputedStyle
    ? window.getComputedStyle(obj, false)[attr]
    : obj.currentStyle[attr]
}
Copy the code

Preview: Come on, dream chasers

[preview] : next to learn JS motion function package – chain movement, strive to learn will know will…

Learning is a continuous process, stick to it, there will be harvest!

Accumulate over a long period, consolidate the foundation, early into Dachang!

It’s not easy to keep it up, and it’s not easy to keep it up. You’re great!

Calm Down & Carry On!

Read more:

Review of previous updates

【 Relearn JS】 Learn every day to consolidate the foundation:

【day1】

Day2 various operators, DAY3 data types, DAY4 loop structures & conditional statements, DAY5 functions (emphasis), day6 scopes & events,

【 DAY7 】 object & array method summary, 【day8】 string method & partial sorting,

【 DAY9 】Math object & Wrapper Function, 【 DAY10 】BOM- Browser object model,

【 DAY11 】DOM- Document Object Model

【 DAY13 】Event Event object first known (2),

【 DAY14 】 Event delegate & Drag principle

Day15 drag-and-drop implementation & regular beginning, day16 regular specific method, day17 cookie, DAY18 ES6

More on the way… A long way to go ==-.. – = =