正文 

当前位置： 首页 > java > java教程

帧动画插件(代码片段)

lijianming180 lijianming180     2023-05-05     345

关键词：

动画插件封装

最近这段时间一直都在研究关于动画方法的知识，说实话确实不容易，主要还是动画算法这方面比较难，毕竟没学过。当然也有所收获，明白了基本动画的原理是什么，所以自己也封装了一个简单的动画插件来巩固自己所学。

动画插件的实现方式

对于前端来说，主要实现动画的方式就是css(transition , animation)，js(setTimeout , setInterval , requestAnimationFrame)，canvas，svg等方式，在这里我主要是通过requestAnimationFrame来实现动画效果的。

插件说明

该插件接受5个参数：

  1. 第一个参数是需要动画的目标元素。
  2. 第二个参数是需要动画的属性，是一个对象。
  3. 第三个参数是动画的总时长。
  4. 第四个参数是动画的效果。目前支持三种动画效果，linear，easeIn，easeOut。
  5. 第五个参数是动画结束之后的回调函数。

该插件可以实现多个属性一起动画效果，也可以实现单个属性动画效果，也可以实现一个属性接着一个属性动画效果。由于使用的是回调函数，所以当一个接着一个属性来实现动画效果的时候，会产生回调函数嵌套。

插件代码

function  (element , props , duration , easing , callback) 
    if (typeof element !== 'object' && element.nodeType !== 1) 
        return;
    ;
    if (typeof props !== 'object' && props.toString() !== '[object Object]') 
        return;
    ;
    var noop = function () ;
    this.element = element;
    this.props = props;
    this.duration = duration || 600;
    this.easing = easing || 'linear';
    this.callback = callback || noop;
    this.tickID = 0;
    this.styles = this.getStyle();
    this.animate();
;
Animator.prototype = 
    getStyle : function () 
        return window.getComputedStyle ? window.getComputedStyle(this.element) : this.element.currentStyle();
    ,
    animate : function () 
        for (var prop in this.props) 
            this.step.call(this , prop);
        
    ,
    step : function (prop) 
        var self = this;
        var initialValue = 0;
        var beginTime = new Date();
        var endValue = parseFloat(this.props[prop]);
        var beginValue = parseFloat(this.styles[prop]);
        var changeValue = parseFloat(endValue - beginValue);  
        var distance = 0;
        var move = function () 
            var p = (new Date() - beginTime) / self.duration;
            if (p > 1) 
                self.element.style[prop] = (prop === 'opacity') ? endValue : endValue + 'px';
                cancelAnimationFrame(self.tickID);
                self.tickID = null;
                self.callback.call(self);
             else 
                if (self.easing === 'linear') 
                    distance = changeValue * p;
                 else if (self.easing === 'easeIn') 
                    distance = changeValue * p * p;
                 else if (self.easing === 'easeOut') 
                    distance = changeValue * (2 * p - p * p);
                ;
                self.element.style[prop] = (prop === 'opacity') ? (beginValue + distance) : (beginValue + distance + 'px');
                this.tickID = requestAnimationFrame(move);  
            
        ;
        move();
    
;

实例代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *
            margin: 0;
            padding: 0;
            list-style: none;
        
        .box
            width:100px;
            height:100px;
            background:#f60;
            position:absolute;
            top:50;
            left:0;
            border: 1px solid #000;大专栏  帧动画插件iv>
        
    </style>
</head>
<body>
<button id="btn">click</button>
<div id="box" class="box"></div>
<script>
function  (element , props , duration , easing , callback) 
    if (typeof element !== 'object' && element.nodeType !== 1) 
        return;
    ;
    if (typeof props !== 'object' && props.toString() !== '[object Object]') 
        return;
    ;
    var noop = function () ;
    this.element = element;
    this.props = props;
    this.duration = duration || 600;
    this.easing = easing || 'linear';
    this.callback = callback || noop;
    this.tickID = 0;
    this.styles = this.getStyle();
    this.animate();
;
Animator.prototype = 
    getStyle : function () 
        return window.getComputedStyle ? window.getComputedStyle(this.element) : this.element.currentStyle();
    ,
    animate : function () 
        for (var prop in this.props) 
            this.step.call(this , prop);
        
    ,
    step : function (prop) 
        var self = this;
        var initialValue = 0;
        var beginTime = new Date();
        var endValue = parseFloat(this.props[prop]);
        var beginValue = parseFloat(this.styles[prop]);
        var changeValue = parseFloat(endValue - beginValue);  
        var distance = 0;
        var move = function () 
            var p = (new Date() - beginTime) / self.duration;
            if (p > 1) 
                self.element.style[prop] = (prop === 'opacity') ? endValue : endValue + 'px';
                cancelAnimationFrame(self.tickID);
                self.tickID = null;
                self.callback.call(self);
             else 
                if (self.easing === 'linear') 
                    distance = changeValue * p;
                 else if (self.easing === 'easeIn') 
                    distance = changeValue * p * p;
                 else if (self.easing === 'easeOut') 
                    distance = changeValue * (2 * p - p * p);
                ;
                self.element.style[prop] = (prop === 'opacity') ? (beginValue + distance) : (beginValue + distance + 'px');
                this.tickID = requestAnimationFrame(move);  
            
        ;
        move();
    
;
var box = document.querySelector('#box');
var btn = document.querySelector('#btn');
btn.addEventListener('click' , function () 
    new Animator(box , 
        width : 300,
        height : 300,
        top : 200,
        left : 100,
        opacity : 0.5,
        borderWidth : 20
    );
);
//效果二
btn.addEventListener('click' , function () 
    new Animator(box , 
        width : 500
     , 1000 , 'easeOut' , function () 
        new Animator(box , 
            height : 300,
            left : 100,
            borderWidth : 50
         , 1000 , 'easeIn' , function () 
            new Animator(box , 
                opacity : 0.6
            )
        );
    );
);
</script>

ioscoreanimation关键帧动画cakeyframeanimation(代码片段)

...shincui/p/3972100.html#autoid-3-0-0总结的:   效果:    关键帧动画,关键帧动画就是在动画控制过程中开发者指定主要的动画状态,至于各种状态间动画如何进行则由系统自动运算补充(每个两个关键帧之间系统形成的动画成为补间动画... 查看详情

javascriptrequestanimationframeanimacion请求动画帧(代码片段)

查看详情

javascript使用请求动画帧更新高度(代码片段)

查看详情

css摇css-关键帧动画/(代码片段)

查看详情

核心动画(关键帧动画)-转(代码片段)

一.简单介绍 是CAPropertyAnimation的子类，跟CABasicAnimation的区别是：CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue)，而CAKeyframeAnimation会使用一个NSArray保存这些数值。 属性解析： values：就是上述的NSArray对象... 查看详情

uwp图片切换动画使用帧动画(代码片段)

原文:uwp图片切换动画使用帧动画上一篇博客使用了Timer来实现图片的切换，@lindexi_gd讨论了一下性能，我本人其实对性能这一方面不太熟，但我觉得还是有必要考虑一下，那么今天我们使用帧动画开实现以下新建项目，添加一个B... 查看详情

scss关键帧css动画mixin(代码片段)

查看详情

scss在最后一帧停止动画(代码片段)

查看详情

ioscoreanimation逐帧动画cadisplaylink(代码片段)

...tp://www.cnblogs.com/kenshincui/p/3972100.html#autoid-3-0-0总结的:逐帧动画CADisplayLink动画效果:结合runloop实现每次屏幕刷新都会执行此方法(每秒接近60此)在此方法更新图片,或者更新layer的某个状态实现动画效果,感觉不到动画的停滞效果当然U... 查看详情

android动画之帧动画的用法(代码片段)

帧动画的简介：帧动画非常容易理解，其实就是简单的由N张静态图片收集起来，然后我们通过控制依次显示这些图片，因为人眼"视觉残留"的原因，会让我们造成动画的"错觉"，跟放电影的原理... 查看详情

css使用css关键帧动画背景图像(代码片段)

查看详情

scsssass-mixins：动画和关键帧(代码片段)

查看详情

unity帧动画(代码片段)

前言动画在游戏中是很重要的一环，通过动画，可以体现出当前角色的行为状态，带给玩家更加丰富的游戏体验Unity中的动画具体有三种：序列帧动画：通过快速播放一系列图片产生动画的效果，类似于Gif... 查看详情

animation-声明关键帧(代码片段)

关键帧——@keyframes类似于flash定义动画在每个阶段的样式，即帧动画关键帧的时间单位数字：0%、25%、100%等(设置某个时间段内的任意时间点的样式)字符：from(0%)、to(100%)格式@keyframes动画名称动画状态@keyframesmove0%transform:translate(0,... 查看详情

cocoscreator基础-(十六)自定义的帧动画播放组件（需要优化）(代码片段)

1:掌握帧动画的原理;2:完成帧动画组件的编写;3:代码中使用帧动画组件; 通过拖拽图片进行播放，比引擎的制作方式方便，但动画不是很灵活 帧动画播放组件 1:creator播放帧动画需要通过动画编辑器去制作;2:为了方便控... 查看详情

scss[css：加载动画]css关键帧动画示例。#css#sass(代码片段)

查看详情

2021-09-26wpf上位机46-路径动画和自定义帧动画(代码片段)

路径动画根据Path数据，限定动画路径动画类名称：类型名称+AnimationUsingPath三种类型：DoubleAnimationUsingPathMatrixAnimationUsingPathPointAnimationUsingPath自定义帧动画1、关键对象：CompositionTarget动画时钟<Windowx:Class="Zhaoxi.AnimationStudy.W 查看详情

可控动画(代码片段)

<!DOCTYPEhtml><html><!--简述：做一个可控动画，能够根据用户输入判断是逐帧播放还是完全播放，同时也能够根据输入前进或者后退。要点分析：监听交互：单击，触摸，滚动等等识别临界值：位移等。临界值内逐帧并且... 查看详情