从 0到1,开发一个动画库(1)

作者:jshao

https://segmentfault.com/a/1190000012923589

如今市面上关于动画的开源库多得数不胜数,有关于CSS、js甚至是canvas渲染的,百花齐放,效果炫酷。但你是否曾想过,自己亲手去实现(封装)一个简单的动画库?

本文将从零开始,讲授如何搭建一个简单的动画库,它将具备以下几个特征:

从实际动画中抽象出来,根据给定的动画速度曲线,完成“由帧到值”的计算过程,而实际渲染则交给开发者决定,更具拓展性

支持基本的事件监听,如 、 、 、 ,及相应的回调函数

支持手动式触发动画的各种状态,如 、 、 、

支持自定义路径动画

支持多组动画的链式触发

完整的项目在这里:点赞行为高尚!,欢迎各种吐槽和指正^_^

OK,话不多说,现在正式开始。

作为开篇,本节将介绍的是最基本、最核心的步骤——构建“帧-值”对应的函数关系,完成“由帧到值”的计算过程。

目录结构

首先介绍下我们的项目目录结构:

是本项目的根目录,各文件的作用分别如下:

index.js 项目入口文件

core.js 动画核心文件

easing.js 存放基本缓动函数

引入缓动函数

所谓动画,简单来说,就是在一段时间内不断改变目标某些状态的结果。这些状态值在运动过程中,随着时间不断发生变化,状态值与时间存在一一对应的关系,这就是所谓的“帧-值”对应关系,常说的动画缓动函数也是相同的道理。

有了这种函数关系,给定任意一个时间点,我们都能计算出对应的状态值。OK,那如何在动画中引入缓动函数呢?不说废话,直接上代码。

首先我们在core.js中创建了一个类:

我们在构造函数中对实例调用函数,对其初始化:将传入的参数保存在实例属性中。

当你看到的时候可能不大明白:外界传入的到底是啥?其实是一个数组,它的每一个元素都保存着独立动画的起始与结束两种状态。这样说好像有点乱,举个栗子好了:假设我们要创建一个动画,让页面上的div同时往右、左分别平移300px、500px,此外还同时把自己放大1.5倍。在这个看似复杂的动画过程中,其实可以拆解成三个独立的动画,每一动画都有自己的起始与终止值:

对于往右平移,就是把css属性的 的0px变成了300px

同理,往下平移,就是把 的0px变成500px

放大1.5倍,也就是把 从1变成1.5

因此传入的value应该长成这样:。我们将数组的每一个元素依次保存在实例的value属性中。

此外,是由外界提供的渲染函数,即,它的作用是:动画运动的每一帧,都会调用一次该函数,并把计算好的当前状态值以参数形式传入,有了当前状态值,我们就可以自由地选择渲染动画的方式啦。

接下来我们给Core类添加一个循环函数:

的作用是:倘若当前时间进度还未到终点,则根据当前时间进度计算出目标现在的状态值,并以参数的形式传给即将调用的渲染函数,即,并继续循环。如果大于,则将目标的运动终止值传给,运动结束,将状态设为。

代码中的是从tween.js文件引入的缓动函数,tween.js的代码如下(网上搜搜基本都差不多= =):

最后,给类增加方法:

core.js的完整代码如下:

在html中引入它后就可以愉快地调用啦^ _ ^

看到这里,本文就差不多结束了,下节将介绍如何在项目中加入各类事件监听及触发方式。

本系列文章将会继续不定期更新,欢迎各位大大指正^_^

觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

本文来自企鹅号 - 前端大全媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葬爱家族

Android高级动画(3)

上一篇文章我们讲了Android中的矢量动画,虽然文中展示的Demo并不多,但是相信大家还是体会到了矢量动画的强大。这里再做一个温故总结:

1631
来自专栏逍遥剑客的游戏开发

Introduction to RenderMonkey

28610
来自专栏hightopo

原 荐 快速开发 HTML5 WebGL 的

8913
来自专栏nimomeng的自我进阶

抓住iOS的未来 - 30天学习编写30个Swift小程序

=======================================================

4532
来自专栏游戏杂谈

Unity插件扩展中组件常用的几个方法

最近为美术编写一个Unity编辑器的扩展,主要为了减轻美术在修改预制对象时的机械化操作的繁琐和出错。具体实现的几个功能:

3761
来自专栏数据小魔方

Excel单元格内容合并的技巧!!!

今天给大家分享单元格内容合并的技巧! ▽ 之前推送过一篇单元格数据分裂的技巧,很多同学都私信我说很实用,并且希望以后能够多写一些这种可以瞬间提升工作效率的小技巧...

3047
来自专栏全沾开发(huā)

项目结构——JavaScript版本的2048实现[0]

项目结构——JavaScript版本的2048实现[0] 最近在看一本书《HTML5 Canvas开发详解》 看到了一定程度,打算找...

3856
来自专栏偏前端工程师的驿站

CSS魔法堂:你真的理解z-index吗?

一、前言                                 假如只是开发简单的弹窗效果,懂得通过z-index来调整元素间的层叠关系就够了。但要将...

2025
来自专栏AndroidTv

属性动画 ValueAnimator 运行原理全解析

好,废话不多说,之前我们已经分析过 View 动画 Animation 运行原理解析,那么这次就来学习下属性动画的运行原理。

4258
来自专栏较真的前端

探寻Vue数据双向绑定的底层原理

3055

扫码关注云+社区

领取腾讯云代金券