问下老师这里视频里的动态效果 恢复到接近到原位的时候有个小幅的上下跳动效果是怎么弄的?

问下老师这里视频里的动态效果 恢复到接近到原位的时候有个小幅的上下跳动效果是怎么弄的?

http://img1.sycdn.imooc.com//climg/5e49438b0944d10a08250177.jpg

问下老师这里视频里的动态效果 恢复到接近到原位的时候有个小幅的上下跳动效果是怎么弄的?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕码 2020-02-17 18:53:13

同学你好,针对你的问题如下解答:

(1)这个动画可以添加在“完成”的状态上。

(2)在animation和transition两个属性中,cubic-bezier是控制变化的速度曲线。

(3)理论上可以替代的,如:

linear cubic-bezier(0,0,1,1) / cubic-bezier(1,1,0,0)

ease cubic-bezier(0.25,0.1,0.25,1)

ease-in cubic-bezier(0.42,0,1,1)

但是本动画中其实可以删掉这两句,不妨碍效果实现:

http://img1.sycdn.imooc.com//climg/5e4a6d55090a020106990151.jpg

(4)三次贝塞尔曲线:cubic-bezier(<x1>,<y1>,<x2>,<y2>)

http://img1.sycdn.imooc.com//climg/5e4a6f1c0969c1ab06050540.jpg

两个默认的,即:P0(0,0),P3(1,1);
两个控制点,即:P1(x1,y1),P2(x2,y2) (这是我们设置的两个点)

由于这个知识点在前端开发中并不会常用的,那么这里了解下即可,无需深究。

(5)这两个大致是一个意思,但是要论区别的话,,要上升到动画和过渡:

transition需要触发一个事件才会随着时间改变其CSS属性;animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果

如果有其他问题的话,建议同学新建提问,以便后期同学对于问题的归纳和总结。

如果我的回答帮的了你,欢迎采纳,祝学习愉快~

好帮手慕码 2020-02-17 10:20:12

同学你好,可以通过transform去实现,参考如下动画:

http://img1.sycdn.imooc.com//climg/5e49f810094f02cc02360035.jpg

http://img1.sycdn.imooc.com//climg/5e49f80409048a3c06490491.jpg

如果我的回答帮到了你, 欢迎采纳,祝学习愉快~

  • 提问者 陈立天 #1
    不是有两个状态一个init 和done吗 这个动画效果直接把 init 和done都写了 那怎么设置初始化?
    2020-02-17 17:44:52
  • 提问者 陈立天 #2
    还有一个问题,老师的cubic-bezier是什么意思三次贝塞尔曲线之前那节课看不懂。是不是可以用ease-in-out 、ease-in等等这些代替三次贝塞尔曲线? 代替的话要怎么写啊?
    2020-02-17 17:56:54
  • 提问者 陈立天 #3
    老师能否解释一下三次贝塞尔曲线四个值分别代表什么?
    2020-02-17 17:58:50
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师