Physical Animations

物理动画入门Session. SLIDES.md

小目标: 利用简单物理公式能零依赖编写简单二维动画

This project was bootstrapped with Create React App

预备知识

• 速度v(velocity), 加速度a(acceleration), 力f(force)等
• 向量(vector)

一些可能需要解释的点

• 帧动画
• 画布坐标系, 单位(标准单位->绘制单位)
• 时间维度和空间维度的动画
• 比较CSS Animation
• 比较Bezier
• 噪声

Content

缓动与弹动 Easing and Springing

• 缓动
• 弹动

跟随 (TODO)

• 鼠标跟随效果, 小尾巴
• 波形文字

二维运动 (这里只看平抛运动)

• 商品跳进购物车
• 抽奖

碰撞 and 动量守恒

• 两个球碰撞

引力 Gravitation

• 捕获天体

随机游走 Random Walk

• 噪声随机游走
• 布朗运动

随机分布 Random Distribution

• 方形分布
• 圆形分布
• 实例: 压筹码

粒子 Particles

• Node Garden

Tips and Tricks

• 简化模型
• squaredDistance
• 步长的选择

Reference

• The Nature of Code 代码本色
• Foundation HTML5 Animation with JavaScript HTML5+JavaScript动画基础
• Node Garden

License

MIT