前端动画--字节青训营

简介: 前端动画--字节青训营

计算机动画原理:


无论动画多么简单,始终要定义两个基本状态,开始状态和结束状态。没有他们,我们将无法定义插值状态,从而填补两者之间的空白。

基础知识点:

1.帧:连续变换的多张画面,其中每一幅画面都是帧

2.帧率:用于度量一定时间内的帧数,测量单位是FPS

3.帧率与人眼:一般每秒10--12帧人会认为画面是连贯的,这个现象称为视觉暂留,目前主流显卡,屏幕输出都是60FPS,效果流畅


空白补全方式


1.补间动画:

绘制关键帧,补间动画师补充关键帧交付

2.逐帧动画:纯手绘


前端动画的分类:


一 Css动画:

实现方式1

animation

animation-name属性指定应用的一系列动画,每个名称代表由@keyframes定义的动画序列。

animation-duration属性指定一个动画的时长。

animation-timing-function属性定义css动画在每一动画周期中执行的节奏

animation-delay CSS属性定义动画于什么时候开始,即延迟多少秒执行

animation-iteration-count CSS属性定义动画在结束前运行的次数 可以是1次,可以无限循环

animation-direction css属性指示动画是否反向播放

animation-play-sate CSS定义一个动画是否运行或者暂停。

实现方式2

Css形体变换-Transform API (只能转换由盒模型定位的元素)

类型:Tanslate(移动),scal(缩放),rotate(旋转),skew(倾斜)

Dom加载完成时或者class发生变化时触发。

div{

Transiton:<property<<duration><timing-function><delay>;

}

实现方式3

Keyframe实现动画:

通过定义动画序列的关键帧的样式来控制动画中的中间步骤


Svg动画


通常有三种方式:SMI,JS,CSS

Filter css属性将模糊或颜色偏移等图形效果应用于元素


JS笔画的原理:


stroke-dashoffset,stroke-dasharray配合使用笔画效果。

1.stroke-dashoffset可控制用来描边图案范式他是一个数列,数与数之间用逗号或者空白隔开,指定短划线和缺口的长度。如果提供了奇数个值,则数列*2.

2.stroke-dasharray属性指定了dash模式到路径开始的距离。

Path路径-d属性(路径描述):

大写字母跟随的是绝对路径x,y,小写为相对路径dx.dy

M/m绘制起始点

C/c绘制贝塞尔曲线

Z/z将当前点与起始点用直线连接

计算path长度-path.getTotalLength()

计算path上某个点的坐标-path.getPointAtLength(lengthNumei)


Js动画


js执行动画的核心思想: r=vt

目录
相关文章
|
1月前
|
前端开发 JavaScript
前端必看的8个HTML+CSS技巧 (六) 裁剪图像的动画
前端必看的8个HTML+CSS技巧 (六) 裁剪图像的动画
|
1月前
|
前端开发 JavaScript iOS开发
精选11款炫酷的前端动画特效分享(附在线演示)
分享11款非常不错炫酷的前端特效源码 其中包含css动画特效、js原生特效、svg特效等 下面我会给出特效样式图或演示效果图 但你也可以点击在线预览查看源码的最终展示效果及下载源码资源
|
1月前
|
前端开发 JavaScript 安全
【前端面试字节ts的手写题】建议收藏!!!
【前端面试字节ts的手写题】建议收藏!!!
55 0
|
1月前
|
JSON 前端开发 JavaScript
前端使用lottie-web,使用AE导出的JSON动画贴心教程
前端使用lottie-web,使用AE导出的JSON动画贴心教程
|
1月前
|
缓存 移动开发 前端开发
字节-2024最新前端面试题梳理-1
字节-2024最新前端面试题梳理-1
210 0
|
1月前
|
前端开发 JavaScript
前端 css 经典:transition 过渡和 animation 动画
前端 css 经典:transition 过渡和 animation 动画
24 2
|
1月前
|
前端开发 算法
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
|
1月前
|
Web App开发 前端开发 iOS开发
CSS3 转换,深入理解Flutter动画原理,前端基础图形
CSS3 转换,深入理解Flutter动画原理,前端基础图形
|
1月前
|
前端开发 开发者 UED
【Flutter前端技术开发专栏】Flutter中的动画与过渡效果实现
【4月更文挑战第30天】Flutter UI框架以其高性能动画库著称,允许开发者轻松创建复杂动画。动画基于`Animation&lt;double&gt;`类,结合`Tween`、`Curve`和`AnimationController`实现。简单示例展示了一个点击按钮后放大效果的创建过程。此外,Flutter提供预定义动画组件和`Navigator`类实现页面过渡。`PageRouteBuilder`允许自定义过渡,而`Hero`动画则实现跨页面的平滑过渡。借助这些工具,开发者能提升应用的视觉吸引力和交互体验。
【Flutter前端技术开发专栏】Flutter中的动画与过渡效果实现
|
1月前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
67 1

热门文章

最新文章