Web前端开发笔记46——动画原理、缓动效果、页面返回特定位置

1.动画原理：最核心的原理，通过定时器（setInterval）不断移动盒子位置。

2.动画在制作的时候，要对对象施加position参数，不然元素对象是不会动的。

3.我们对不同的对象设置不同的timer可以使用‘obj.元素’的方式来声明timer，这样每个元素都有属于自己的timer了。

4.上面的代码有一个bug，就是在多次触发的情况下timer会多次叠加，这个时候我们就要用到clearInterval来先清楚，在执行。

5.缓动效果。

click

上面是一个典型的例子。

6.给动画函数添加回调函数。

7.滚动窗口至文档中的特定位置。window.scroll(x,y),一般我们设置y轴就可以返回到特定位置。所以，当y=0，就是返回页面顶端了。

8.我们之前学过window.pageYOffset得到页面滚动了多少，我们可以使用window.scroll(x,y)和window.pageYOffset，实现滚动动画。