首页 > 其他分享 >动画缓动效果

动画缓动效果

时间:2022-11-14 17:47:28浏览次数:54  
标签:动画 obj 效果 step 缓动 var 盒子

动画缓动效果

缓动效果原理

缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来思路∶
1.让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。
2.核心算法∶(目标值-现在的位置)/ 10做为每次移动的距离步长

<style>
        div {
            /* 注意:一定要添加定位 */
            position: absolute;
            left: 0px;
            height: 100px;
            width: 100px;
            background-color: skyblue;
        }
        
        span {
            position: absolute;
            top: 150px;
            left: 0;
            display: block;
            height: 100px;
            width: 100px;
            background-color: orange;
        }
    </style>
<button class="btn300">让第二个盒子开始移动300</button>
    <button class="btn800">让第二个盒子开始移动800</button>
    <div>第一个盒子,到400时停下</div>
    <span>第二个盒子,到300时停下</span>
    <script>
        function animate(obj, target) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 步长值写到定时器的里面
                // 把我们步长值改为整数 不要出现小数的问题
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 30);
        }
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn300 = document.querySelector('.btn300');
        var btn800 = document.querySelector('.btn800');

        // 调用函数
        animate(div, 400);
        btn300.addEventListener('click', function() {
            animate(span, 300);
        })
        btn800.addEventListener('click', function() {
                animate(span, 800);
            })
            // 匀速动画 就是 盒子当前的位置 +  固定的值 10 
            // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10)
    </script>

标签:动画,obj,效果,step,缓动,var,盒子
From: https://www.cnblogs.com/chichi0002/p/16889734.html

相关文章

  • 动画函数封装
    动画函数封装1.动画实现原理核心原理∶通过定时器setlnterval)不断移动盒子位置。实现步骤:1.获得盒子当前位置2.让盒子在当前位置加上1个移动距离3.利用定时器不断......
  • vuecli动画
    <template><divclass="school"><button@click="isShow=!isShow">显示/隐藏</button><transition:appear="true"><h2v-show="isShow">你好......
  • Cesium积雪效果
    Cesium积雪效果原理参考PS:以下默认为自定义着色器的做法--Cesium1.87后的版本;之前的版本做法为后处理,但后处理实现的话鼠标移动会出现闪屏的现象,故不作考虑。1、获取视......
  • 实现打字效果(文字逐个显示)
    一、引入vue3typed插件1、使用npmivue3typed 进行安装2、导入组件,在main.js中插入以下代码 importvuetypedfrom'vue3typed'  createApp(App).use(vuetyped).m......
  • PS新手教程-如何使用PS给照片添加下雪效果
    如何使用PS给照片添加下雪效果?给大家介绍如何使用PS给照片添加下雪效果,一起来看看吧。1.打开PS,将素材拖入PS中,新建一个图层,填充黑色,在菜单栏找到【滤镜-杂色-添加杂色】,点击......
  • h5中drag的使用以及相关介绍:实现点餐效果
    相关的API主要有7个api,分别用来描述不同的状态前提准备主要实现的点餐功能如下:一个盘子里装了多种菜另一个是小明的菜单小明可以拖动菜品到菜单上小明的菜单中最......
  • css和html实现花瓣动画效果:
    css和html实现花瓣动画效果如图1首先我们要画一个建立一个正方行模型,里面来接椭圆<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewp......
  • 不一样的纯H5C3动画爱心
    最近抖音很火的让你会计算机的朋友给你做个爱心突然火了,我也不出意外的收到了朋友的邀请,自己做肯定太麻烦了于是乎百度第一步,惊呆了!网上全都是一个爱心,变着法的火焰爱......
  • Spring 事务(测试)--在这个笔记中记录的是没有添加事务,数据库返回的效果。
    第5章Spring事务(测试)--在这个笔记中记录的是没有添加事务,数据库返回的效果。1.首先搞两张表,商品表和订单表举例:购买商品trans_sale项目本例要实现购买商品,模拟用......
  • 推荐12款实用的 JavaScript 书页翻转效果插件
    Flipbooks(书页)或者页面翻转已成为在网页设计中最流行的交互动画之一。他们可以用在Flash,网页或者在线杂志中。使用书页动画或者页面翻转的网页设计效果方便人们展示他......