JS реализует параболическую анимацию

внешний интерфейс JavaScript 
author: 陈家宾
email: 617822642@qq.com
date: 2018/2/24

JS реализует параболическую анимацию

В проекте создания беспилотного удобного апплета однажды продукт сказал, что учится у продукта определенного производителя, добавляя анимацию параболического шара в дополнительную корзину для покупок. Ну, продукт ваш самый большой, сделайте это!

Позвольте мне сначала показать вам рендеры (на самом деле это уже эффект после реализации, и я, кстати, рекламировал свою компанию, ха-ха)

анализировать

Этот вид анимации, который не имеет фиксированной начальной позиции, естественно, не может использовать gif-изображения, поэтому его можно реализовать только с помощью собственного кода.

Итак, какие инструменты у нас есть для создания анимации?

  • Апплет предоставляет JS APIcreateAnimationдля создания анимации
  • CSS transition

С помощью инструментов давайте посмотрим, что такое парабола.

Здесь мы обсуждаем только горизонтальную параболу.Математически говоря, горизонтальная парабола - это "горизонтальное движение с равномерной скоростью и вертикальным ускорением". Преобразование его на уровне кода - это эффект анимации.timingFunction, горизонтальная анимация используетlinear, вертикальная анимация используетease-in

Итак, нам нужно разложить эту параболическую анимацию надва в то же времяпродолжай, норазные анимационные эффектыанимация.

выполнить

Во-первых, реализация небольших программ

js:

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
}

HTML:

<view animation="{{animationY}}" style="position:fixed;top:{{ballY}}px;" hidden="{{!showBall}}">
    <view class="ball" animation="{{animationX}}" style="position:fixed;left:{{ballX}}px;"></view>
</view>
перевести оптимизацию

Насколько я знаю, сtransform: translate()Анимация, которую нужно реализовать, будет иметь лучшую производительность, чем сверху и слева, но ее не так просто реализовать.

После исследований и исследований я обнаружил, что метод перевода на один шаг больше, чем метод сверху и слева, то естьперевести восстановление смещения(В противном случае перевод всегда имеет значение), чтобы гарантировать, что следующее смещение начнется с позиции, на которую нажали.

cartAnimation(x, y) {
    let self = this,
        cartY = app.globalData.winHeight - 50,
        cartX = 50,
        animationX = flyX(cartX, x),
        animationY = flyY(cartY, y)
    this.setData({
        leftNum: x,
        topNum: y,
        showBall: true
    })
    setTimeoutES6(100).then(() => {
        self.setData({
            animationDataX: animationX.export(),
            animationDataY: animationY.export(),
        })
        return setTimeoutES6(400)
    }).then(() => {
        this.setData({
            showBall: false,
            animationX: flyX(0, 0, 0).export(), // 还原小球位置，即 translate 恢复默认值
            animationY: flyY(0, 0, 0).export(),
        })
    })
}

function flyX(cartX,oriX,duration) {
    let animation = wx.createAnimation({
        duration: duration||400,
        timingFunction: 'linear',
    })
    animation.translateX(cartX-oriX).step()
    return animation
}
function flyY(cartY,oriY,duration) {
    let animation = wx.createAnimation({
        duration: duration||400,
        timingFunction: 'ease-in',
    })
    animation.translateY(cartY-oriY).step()
    return animation
}

HTML-часть без изменений

Реализация H5

В дополнение к небольшим программам, ежедневная разработка внешнего интерфейса, конечно же, H5, для чего я буду использовать метод перехода CSS3 ниже.

<!DOCTYPE html>
<html lang="en" style="width:100%;height:100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        #ball {
            width:12px;
            height:12px;
            background: #5EA345;
            border-radius: 50%;
            position: fixed;
            transition: left 1s linear, top 1s ease-in;
        }
    </style>
    <title>CSS3 水平抛物线动画</title>
</head>
<body style="width:100%;height:100%;">
    <div id="ball"></div>
</body>
<script>
    var $ball = document.getElementById('ball');
    document.body.onclick = function (evt) {
        console.log(evt.pageX,evt.pageY)
        $ball.style.top = evt.pageY+'px';
        $ball.style.left = evt.pageX+'px';
        $ball.style.transition = 'left 0s, top 0s';
        setTimeout(()=>{
            $ball.style.top = window.innerHeight+'px';
            $ball.style.left = '0px';
            $ball.style.transition = 'left 1s linear, top 1s ease-in';
        }, 20)
    }
</script>
</html>

Есть также ссылки на опыт.нажми на меня

Пока что реализация анимации горизонтальной параболы почти внедрена, хи-хи! !

Категории