02-JS特效-匀速动画

最新推荐文章于 2022-08-01 10:07:42 发布

喝着绿茶的猫

最新推荐文章于 2022-08-01 10:07:42 发布

阅读量679

点赞数

分类专栏： JavaScript-特效

本文链接：https://blog.csdn.net/luyu13141314/article/details/53791820

版权

本文介绍了JavaScript实现匀速动画的原理和几种不同类型的动画效果，包括闪动、匀速和缓动。核心思想是通过改变盒子位置和步长来实现动画。并提供了三个案例，分别是02.1滑动轮播图、02.2左右焦点图和02.3带有定时器的无缝轮播图，用于展示匀速动画的应用。

摘要由CSDN通过智能技术生成

动画的种类

动画原理 = 盒子位置 + 步长。

1.闪动。（瞬间到达）

2.匀速。（每次走一样距离）

3.缓动。（开始特快越走越慢，步长越来越小.类似刹车，电梯停止，压缩弹簧…）

动画的原理：盒子的位置=盒子本身所在的位置+步长

<style>
    * {
        padding: 0;
        margin: 0;
    }
    div {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 5px;
        background-color: pink;
    }
    .box2 {
        background-color: yellowgreen;
        top: 140px;
    }
</style>
<body>
<button>到200位置</button>
<button>到400位置</button>
<div></div>
<div class="box2"></div>
<script>
//需求：点击按钮，盒子移动

var btnArr = document.getElementsByTagName("button");
var box = document.getElementsByTagName("div")[0];
var box2 = document.getElementsByTagName("div")[1];

btnArr[