Home Web Front-end JS Tutorial How to make a JS parabola animation (detailed tutorial)

How to make a JS parabola animation (detailed tutorial)

Jun 04, 2018 pm 04:08 PM
javascript make parabola

This article gives you a detailed analysis of the JS parabolic animation production process and related code examples. Friends who are interested can refer to it.

In the project of making an unmanned convenience applet, one day the product said that it would learn from a certain manufacturer's product and add a parabolic ball animation to the shopping cart. Well, product you are the biggest, do it!

Let me show you the renderings first

Analysis

This kind of non-fixed start Of course, position animation cannot use GIF images, so it can only be implemented using native code

So what tools do we have to implement animation?

The applet provides the JS API createAnimation to create animations

CSS animation

Now that the tool is available, let’s take a look What is a parabola.

Here we only discuss the horizontal parabola. From the mathematical principle, the horizontal parabola is [movement with constant horizontal speed and vertical acceleration]. The conversion to the code level is in the animation effect timingFunction. The horizontal animation uses linear and the vertical animation uses ease-in

So we need to decompose this parabolic animation into two animations that are performed simultaneously but with different animation effects.

Implementation

Implementation of small program

JS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

cartAnimation(x, y) { // x y 为手指点击的坐标,即球的起始坐标

  let self = this,

    cartY = app.globalData.winHeight - 50, // 结束位置(购物车图片)纵坐标

    cartX = 50, // 结束位置(购物车图片)的横坐标

    animationX = flyX(cartX, x), // 创建球的横向动画

    animationY = flyY(cartY, y), // 创建球的纵向动画

    this.setData({

      ballX: x,

      ballY: y,

      showBall: true

    })

  setTimeoutES6(100).then(() => { // 100 秒延时,确保球已经到位并显示

    self.setData({

      animationX: animationX.export(),

      animationY: animationY.export(),

    })

    return setTimeoutES6(400) // 400 是球的抛物线动画时长

  }).then(() => { // 400 秒延时后隐藏球

    this.setData({

      showBall: false,

    })

  })

}

 

function setTimeoutES6(sec) { // Promise 化 setTimeout

  return new Promise((resolve, reject) => {

    setTimeout(() => {resolve()}, sec)

  })

}

 

function flyX(cartX, oriX) { // 水平动画

  let animation = wx.createAnimation({

    duration: 400,

    timingFunction: 'linear',

  })

  animation.left(cartX).step()

  return animation

}

 

function flyY(cartY, oriY) { // 垂直动画

  let animation = wx.createAnimation({

    duration: 400,

    timingFunction: 'ease-in',

  })

  animation.top(cartY).step()

  return animation

}

Copy after login

HTML:

1

2

3

<view animation="{{animationY}}" style="position:fixed;top:{{ballY}}px;" hidden="{{!showBall}}">

  <view class="ball" animation="{{animationX}}" style="position:fixed;left:{{ballX}}px;"></view>

</view>

Copy after login

As far as I know, the animation implemented using transform: transform() will be better than top & left The performance is better, but after trying it, I found that it cannot achieve the ideal interactive effect. I look forward to continuing to study it

H5 implementation

1

// todo

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Instances of mobile phone number, email regular verification and 60s sending verification code in vue

##NodeJS parent The principle and implementation method of resource sharing between processes and sub-processes

Vue implements active click switching method

The above is the detailed content of How to make a JS parabola animation (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1662
14
PHP Tutorial
1261
29
C# Tutorial
1234
24
How to implement an online speech recognition system using WebSocket and JavaScript How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

How to use JavaScript and WebSocket to implement a real-time online ordering system How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

How to implement an online reservation system using WebSocket and JavaScript How to implement an online reservation system using WebSocket and JavaScript Dec 17, 2023 am 09:39 AM

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

Operation guide for creating mobile Excel tables Operation guide for creating mobile Excel tables Feb 18, 2024 pm 02:41 PM

Mobile Excel table creation tutorial With the popularity of mobile devices and the continuous advancement of technology, mobile phones have become one of the indispensable tools in our daily life and work. Using Excel spreadsheets on your mobile phone can easily record, calculate and analyze data and improve work efficiency. This article will share with you the basic operations and techniques for creating mobile Excel tables. 1. Choose the right application. There are many mobile Excel applications on the market to choose from, such as GoogleSheets, Micro

Specific method to create film movement effect in PPT Specific method to create film movement effect in PPT Mar 26, 2024 pm 04:00 PM

1. Start PPT, create a new blank document, select all text boxes and delete them. 2. Execute the Insert-Shape command, drag a rectangle in the document, and fill the shape with black. 3. Drag the rectangle to elongate it, execute the Insert-Shape command, drag out the small square, and set the fill color to white. 4. Copy and paste the small squares one by one so that the top and bottom are evenly distributed on both sides of the film. After selecting them all with ctrl+a, right-click and select Group. 5. Execute the Insert-Picture command, find the picture to be inserted in the pop-up dialog box, click to open, and adjust the size and position of the picture. 6. Repeat step 5 to insert and set the remaining pictures in order to form a film picture. 7. Select the film, execute animation-add animation command

JavaScript and WebSocket: Building an efficient real-time weather forecasting system JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

See all articles