通过时间扭曲实现缓动动画

oogh 发布于2019-08-21 14:29 / 608人阅读

摘要：通过时间扭曲实现缓动动画经常会见到各类缓动函数，在里面有现成的等缓动效果直接用。这次的实践在一个封装的基础上，请参考精灵封装缓动动画的本质，是在单位时间内移动不同的距离。

通过时间扭曲实现缓动动画

经常会见到各类缓动函数，在CSS里面有现成的bounce、elastic等缓动效果直接用。如果在canvas动画中，我们要实现这些缓动函数。直接去思考怎么处理挺头疼的，介绍一种不错的实现方式，源自《HTML5 Canvas核心技术》。

这次的实践在一个封装的基础上，请参考：canvas精灵封装

Begin

缓动动画的本质，是在单位时间内移动不同的距离。

一个简单的公式：距离 = 速度 × 时间；

要实现距离缓动，只有两种方式：

要么保持时间正常流动，实现速度缓动；

要么保持速度不变实现时间扭曲；

下图是elastic效果的距离与时间函数，我乱拿了一个三角函数图像，忽略掉负轴就好

△V = △S / △T，理论上对距离/时间曲线进行求导，得到速度的变化曲率，改变速度也能实现。

这次实现的是保持速度不变，扭曲时间实现缓动：

1、每个动画时间固定，通过时间能获取到动画进度：

先给出时间扭曲函数：

f(x) = ((1 - cos(x * pi * 3)) * (1-x)) + x

转换成代码：

var makeElastic = function (passes) {// passes是跳动的次数
       passes = passes || 3;
       return function (percentComplete) {
           return ((1-Math.cos(percentComplete * Math.PI * passes)) *
               (1 - percentComplete)) + percentComplete;
    };
};

函数图像：

通过Sprite封装的behavior来实现时间扭曲

var moveBall = {
        updateBallPosition: function(elapsed){
            if (arrow === LEFT){
                ball.left -= ball.velocityX * (elapsed/1000);
            } else{
                   ball.left += ball.velocityX * (elapsed/1000);
            }
        },
        execute: function(ball, context,time){
            // 核心！
            // 这里的animationElapsed是被扭曲过的时间
            // getElapsedTime()就是上面的makeElastic
            // 经过一些封装，传入t得出扭曲过的时间
            var animationElapsed = pushAnimationTimer.getElapsedTime()，
                elapsed;
                
            elapsed = animationElapsed - this.lastTime;
            this.updateBallPosition(elapsed);
            
        }
    }

海外云主机 GPU服务器实现加载动画 javascript实现动画通过消息队列实现 html 时间轴动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87925.html

可能是最全的前端动效库汇总

摘要：非常的庞大，而且它是完全为设计而生的动效库。它运行于纯粹的之上，是目前最强健的动画资源库之一。可能是创建滚动特效最好用的工具，它支持大量的浏览器，只要它们支持和特性。可以通过安装吊炸天了，接近现实生活中的物理运动碰撞惯性动画库。收集日期为2019-02-28，★代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库，是许多基础动...

afishhhhh 2019-05-23 16:24 评论0 收藏0
React Motion 缓动函数剖析

摘要：大家可以尝试使用的，配置一个合适的劲度系数和空气阻力。所做的事，只不过自己实现了一套缓动函数。根据经典力学的观点，世界上所有的原子每时每刻仿佛都会根据当前速度、受力和位置计算出下一刻的速度、受力和位置。上帝有一台超级计算机吗？非也，反而计算机是我们利用原子的这些特性拼装出来的。现在，我们却要用计算机，像上帝那样，再造一个世界。我不知道这个世界上有没有仿世学，但是既然动画是要模仿现实...

wfc_666 2019-08-19 17:18 评论0 收藏0
【前端优化】动画几种实现方式总结和性能分析

摘要：备注没整理格式，抱歉动画实现的几种方式性能排序实现方式自身调用调用的定时器值推荐最小使用的原因即每秒帧为什么倒计时动画一定要用而避免使用两者区别及引发的线程讨论线程讨论为什么单线程是的一大特性。备注：没整理格式，抱歉动画实现的几种方式：性能排序js < requestAnimationFrame 3->4->2. 那么在来看你这段代码。 var t = true; window...

IamDLY 2019-08-23 15:35 评论0 收藏0
JS—动画缓动—tween.js

摘要：动画运动算法线性匀速运动效果二次方的缓动三次方的缓动四次方的缓动五次方的缓动正弦曲线的缓动指数曲线的缓动圆形曲线的缓动指数衰减的正弦曲线缓动超过范围的三次方缓动指数衰减的反弹缓动。 requestAnimFrame兼容 window.requestAnimFrame = (function (callback,time) { return window.requestAnima...

wangxinarhat 2019-08-26 12:11 评论0 收藏0
CSS Animations vs Web Animations API

摘要：方法接受两个参数关键帧和持续时间。第一个参数，关键帧，是一个对象数组，每个对象都是动画中的一个关键帧。为我们提供了两种不同的方式设置缓动在我们的关键帧数组或我们的选项对象内。实际上，这些缓动应用在关键帧之间，而不是整个动画。作者：Ollie Williams 原文：CSS Animations vs Web Animations API 在 JavaScript 有一个原生动画...

2501207950 2019-08-29 12:50 评论0 收藏0