7.5_以扭曲后的帧速率播放动画

最新推荐文章于 2021-02-22 05:36:33 发布
最新推荐文章于 2021-02-22 05:36:33 发布
阅读量410 收藏
点赞数
分类专栏： HTML5_CANVAS练习案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jun_sun_shine/article/details/72963395
版权

7.5_以扭曲后的帧速率播放动画

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>以扭曲后的帧速率播放动画</title>
        <style>
            body{
                background: #cdcdcd;
            }
            .controls{
                position: absolute;
                left: 150px;
                top: 10px;
                font: 12px arial;
            }

            #canvas{
                position: absolute;
                left: 0;
                top: 20px;
                margin: 20px;
                border: thin inset rgba(100,150,230,0.8);
                background: #efefef;
            }
            #animateButton{
                margin-left: 15px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <input id="animateButton" type="button" value="Animate" />
        <canvas id="canvas" width="420" height="100" ></canvas>
        <div id="motionControls" class="controls">
            <div id="motionRadios">
                <input type="radio" name="motion" id="linearRadio" checked="" />匀速
                <input type="radio" name="motion" id="easeInRadio"/>缓入
                <input type="radio" name="motion" id="easeOutRadio"/>缓出
                <input type="radio" name="motion" id="easeInOutRadio"/>缓入缓出
            </div>
        </div>
    </body>
    <!-- 精灵对象 -->
    <script>
        var Sprite = function(name,painter,behaviors){
            if(name !== undefined){ this.name = name; }
            if(painter !== undefined){ this.painter = painter; }

            this.top = 0;
            this.left = 0;
            this.width = 10;
            this.height = 10;
            this.velocityX = 0;
            this.velocityY = 0;
            this.visible = true;
            this.animating = false;
            this.behaviors = behaviors || [];

        }

        Sprite.prototype = {
            paint:function(context){
                if(this.painter !== undefined && this.visible){
                    this.painter.paint(this,context);
                }
            },
            update:function(context,time){
                for(var i=0;i<this.behaviors.length;i++){
                    this.behaviors[i].execute(this,context,time);
                }
            }
        }
    </script>
    <!-- 重构后的支持时间轴扭曲功能的AnimationTimer对象（动画计时器） -->
    <script>
        StopWatch = function(){};
        StopWatch.prototype = {
            startTime:0,
            running:false,
            elapsed:undefined,

            start:function(){
                this.startTime = +new Date();
                this.running = true;
                this.elapsed = undefined;
            },
            stop:function(){
                this.elapsed = (+new Date()) - this.startTime;
                this.running = false;
            },
            isRunning:function(){
                return this.running;
            },
            getElapsedTime:function(){
                if(this.isRunning()){
                    return (+new Date()) - this.startTime;
                }else{
                    return this.elapsed;
                }
            },
            reset:function(){
                this.elapsed = 0;
            }
        };

        AnimationTimer = function(duration,timeWarp){
            if(duration !== undefined){
                this.duration = duration;
            };
            if(timeWarp !== undefined){
                this.timeWarp = timeWarp;
            }
            this.stopWatch = new StopWatch();
        }

        AnimationTimer.prototype = {
            default_elastic_passes:3,
            start:function(){
                this.stopWatch.start();
            },
            stop:function(){
                this.stopWatch.stop();
            },
            getElapsedTime:function(){
                var elapsedTime = this.stopWatch.getElapsedTime();
                var percentComplete = elapsedTime/this.duration;

                if(!this.stopWatch.running){
                    return undefined;
                };
                if(this.timeWarp == undefined){
                    return elapsedTime;
                };
                //console.log(this.timeWarp);
                return elapsedTime*(this.timeWarp(percentComplete)/percentComplete);
            },
            isRunning:function(){
                return this.stopWatch.isRunning();
            },
            isOver:function(){
                return this.stopWatch.getElapsedTime() > this.duration;
            },
            //运动形式
            makeEaseIn:function(strength){  //缓入动画
                return function (percentComplete){
                    console.log('进入缓入动画了');
                    return Math.pow(percentComplete,strength*2)
                }
            },
            makeEaseOut:function(strength){
                return function(percentComplete){  //缓出动画
                    console.log('进入缓出动画了');
                    return 1-Math.pow(1-percentComplete,strength*2);
                };
            },
            makeEaseInOut:function(){  //缓入缓出动画
                return function(percentComplete){  //第一个return是timeWarp函数
                    console.log('进入缓入缓出动画了');
                    return percentComplete - Math.sin(percentComplete*2*Math.PI)/(2*Math.PI);
                };
            },
            makeElastic:function(passes){ //弹簧运动
                var passes = passes || this.default_elastic_passes;
                return function(percentComplete){
                    console.log('进入弹簧运动了');
                    return ((1-Math.cos(percentComplete*Math.PI*passes))*(1-percentComplete))+ percentComplete;
                };
            },
            makeBounce:function(bounces){ //弹跳运动
                var fn = this.makeElastic(bounces);
                return function(percentComplete){
                    console.log('进入弹跳运动了');
                    percentComplete = fn(percentComplete);
                    return percentComplete <=1 ?percentComplete:2-percentComplete;
                }
            },
            makeLinear:function(){  //匀速运动
                return function(percentComplete){
                    console.log('进入匀速运动了');
                    return percentComplete;
                }
            }
        };
    </script>
    <!-- 精灵表绘制器 -->
    <script>
        var SpriteSheetPainter = function(cells){
            this.cells = cells || [];
            this.cellIndex = 0;
        }

        SpriteSheetPainter.prototype = {
            advance:function(){
                if(this.cellIndex == (this.cells.length-1)){
                    this.cellIndex = 0;
                }else{
                    this.cellIndex++;
                }
            },
            paint:function(sprite,context){
                var cell = this.cells[this.cellIndex];
                context.drawImage(spritesheet,cell.x,cell.y,cell.w,cell.h,sprite.left,sprite.top,cell.w,cell.h);
            }
        }
    </script>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        var linearRadio = document.getElementById('linearRadio');
        var easeInRadio = document.getElementById('easeInRadio');
        var easeOutRadio = document.getElementById('easeOutRadio');
        var easeInOutRadio = document.getElementById('easeInOutRadio');

        var animateButton = document.getElementById('animateButton');
        var spritesheet = new Image();

        var runnerCells =[ //精灵图表中的每幅图的定位
                        {x:0,y:0,w:47,h:64},
                        {x:55,y:0,w:44,h:64},
                        {x:107,y:0,w:39,h:64},
                        {x:150,y:0,w:46,h:64},
                        {x:208,y:0,w:49,h:64},
                        {x:265,y:0,w:46,h:64},
                        {x:320,y:0,w:42,h:64},
                        {x:380,y:0,w:35,h:64},
                        {x:425,y:0,w:35,h:64}
                    ];
        var interval;
        var lastAdvance = 0;
        var sprite_left = canvas.width - runnerCells[0].w;
        var sprite_top = 10;

        var pageFlip_interval = 100;//换帧频率
        var animation_duration = 3900; //运动的总时长

        //设置一个计时器
        //console.log(AnimationTimer.makeLinear(1));

        var animationTimer = new AnimationTimer(animation_duration);
        animationTimer.timeWarp = animationTimer.makeLinear(1);

        //坐标系
        var left = 1.5;
        var right = canvas.width - runnerCells[0].w;
        var tick_height = 8.5;
        var baseline = canvas.height - 9.5;
        var width = right - left;

        //人物原定换帧
        var runInPlace = {
            execute:function(sprite,context,time){
                var elapsed = animationTimer.getElapsedTime();

                if(lastAdvance ===0){ //跳过第一次
                    lastAdvance = elapsed;
                }else if(lastAdvance!=0 && (elapsed - lastAdvance) >pageFlip_interval){
                    sprite.painter.advance();

                    lastAdvance = elapsed;
                }
            }
        };

        var moveRightToLeft = {
            lastMove : 0,
            reset:function(){
                this.lastMove = 0;
            },
            execute:function(sprite,context,time){
                var elapsed = animationTimer.getElapsedTime();

                if(this.lastMove == 0){
                    console.log(elapsed+'lllll')
                    this.lastMove = elapsed;
                }else{
                    sprite.left -= (elapsed - this.lastMove)/1000*sprite.velocityX;

                    this.lastMove = elapsed;
                }
            }

        };

        var sprite = new Sprite('runner',new SpriteSheetPainter(runnerCells),[moveRightToLeft,runInPlace])


        //初始化
        spritesheet.src = 'img/running-sprite-sheet.png';
        sprite.left = sprite_left;
        sprite.top = sprite_top;
        sprite.velocityX = 100;

        drawAxis();
        spritesheet.onload = function(){
            sprite.paint(context);
        }

        //事件
        animateButton.onclick = function(){
//          if(animateButton.value =='Animate'){
                startAnimation();
//          }else{
//              endAnimation()
//          }
        };
        //变换运动方式
        linearRadio.onclick = function(){
            animationTimer.timeWarp = animationTimer.makeLinear(1);
        }
        easeInRadio.onclick = function(){
            animationTimer.timeWarp = animationTimer.makeEaseIn(1);
        }
        easeOutRadio.onclick = function(){
            animationTimer.timeWarp = animationTimer.makeEaseOut(1);
        }
        easeInOutRadio.onclick = function(){
            animationTimer.timeWarp = animationTimer.makeEaseInOut();
        }

        //函数
        //开始动画
        function startAnimation(){
            animationTimer.start();
            animateButton.style.display = 'none';
            window.requestAnimationFrame(animate);
        }
        //动画结束
        function endAnimation(){
            animateButton.value = 'Animate';
            animateButton.style.display = 'inline';
            animationTimer.stop();
            lastAdvance = 0;
            sprite.painter.cellIndex =0;
            sprite.left = sprite_left;
            moveRightToLeft.reset();

        }
        //执行动画
        function animate(time){
            if(animationTimer.isRunning()){
                context.clearRect(0,0,canvas.width,canvas.height);
                sprite.update(context,time);
                sprite.paint(context);
                drawTimeLine()
                drawAxis();

                if(animationTimer.isOver()){ //计时器到点了，停止动画
                    console.log('动画时间到了，已停止');
                    endAnimation();
                }
                window.requestAnimationFrame(animate);
            }
        }
        //绘制坐标系
        function drawAxis(){
            context.lineWidth = 0.5;
            context.strokeStyle = 'cornflowerblue';
            context.moveTo(left,baseline);
            context.lineTo(right,baseline);
            context.stroke();

            //长间隔线
            for(var i =0 ;i<width;i+=width/20){
                context.beginPath();
                context.moveTo(left+i,baseline - tick_height/2);
                context.lineTo(left+i,baseline+tick_height/2);
                context.stroke();
            }

            //短间隔线
            for(var i =0 ;i<width;i+=width/4){
                context.beginPath();
                context.moveTo(left+i,baseline - tick_height);
                context.lineTo(left+i,baseline+tick_height);
                context.stroke();
            }

            context.beginPath();
            context.moveTo(right,baseline - tick_height);
            context.lineTo(right,baseline+tick_height);
            context.stroke();
        }

        //绘制正常时间线
        function drawTimeLine(){
            var realElapsed = animationTimer.stopWatch.getElapsedTime()
            var realPercent = realElapsed/animation_duration;

            context.lineWidth = 0.5;
            context.strokeStyle = 'rgba(0,0,255,0.5)';
            context.beginPath();
            context.moveTo(width - realPercent*width,0);
            context.lineTo(width - realPercent*width,canvas.height);
            context.stroke();

        }

    </script>
</html>

这里写图片描述

信封中的阳光
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
UE 进阶篇一：动画系统
yuchenwuhen的专栏
11-22 289
下面的动画部分功能比较全，可以参考这种实现方式，根据自己项目的颗粒度选择部分功能参考，我们商业项目动画部分也是这么实现的。
用canvas.drawBitmapMesh()扭曲图片。达到揉动图片的效果
八步赶蝉
04-22 2864
主要用到canvas.drawBitmapMesh()方法：主要接收前5个参数,后3个参数是颜色及画笔相关，可设为null1.需要扭曲的源位图2.图片横向分成多少个3.图片纵向分成多少格4.一个float[]数组，具体作用如下：5.从第四个参数的数组中选第几个数组元素（哪个点）开始进行扭曲所以对图片的扭曲，揉动效果，根本上是对许多点进行扭曲。public class MainActivity ex...
canvas上纯JS实现可滑动时间刻度轴
liangpx.blog
07-18 8666
canvas上纯JS实现可滑动时间刻度轴、刻度轴
UE4帧动画Matineed
神码编程
07-15 9965
1.创建一个Sphere模型，准备做一个球的移动动画 2.点击工具栏的Cinematics/Add Matinee
canvas精灵封装
weixin_33883178的博客
08-30 271
在做canvas动画时，精灵封装的好坏，直接影响后续的编程体验。 下文的封装方法来自《HTML5 Canvas核心技术 图形、动画与游戏开发》，实现了精灵与绘制对象的解耦，很好用，平时自己也用这种写法。 一个完整的Sprite包含两部分： Sprite的基本封装 Sprite Painter实现 拆开Sprite和Painter，实现...
Unity3D逐帧播放动画脚本1
08-08
标题中的“Unity3D逐帧播放动画脚本1”指的是在Unity3D游戏引擎中，通过编写脚本来实现动画的逐帧播放功能。这种技术常用于2D游戏或某些特殊的3D动画效果，例如像素动画或者低帧率的过场动画。 描述中提到的关键点...
ReadVideo_视频播放自动保存帧_
09-30
当这些帧以一定的速率连续播放时，人眼会产生连续动态的视觉效果。 - 帧率（Frame Rate）：通常以FPS（Frames Per Second）表示，即每秒显示的帧数，决定了视频的流畅度。 2. **视频播放**： - 视频播放器：软件...
rate-equ.rar_matlab 速率方程_速率方程_速率方程求解
07-13
速率方程在化学、生物学、物理学以及工程学等多个领域中广泛应用，它描述了反应速率与反应物浓度之间的关系。在MATLAB环境中，我们可以利用其强大的数值计算能力来求解复杂的速率方程。以下是对"rate-equ.rar_matlab...
cwt.rar_小波 码元速率_码元估计_码元速率_码元速率估计_速率估计
07-15
基于小波变换的码元速率估计，估计精度很高。还有测试信号和mpsk函数功能。
laser18.rar_matlab 激光_光纤激光_激光器_激光速率方程_速率方程
07-14
光纤激光器速率方程的matlab程序,程序好用，经过验证，可以使用
ue4-摄像机动画Matinee(多图慎入)
热门推荐
.
01-20 2万+
利用摄像机做一些镜头特效之类的 1. 首先创建一个Matinee 创建 打开编辑区域 2. 创建摄像机 创建 为摄像机创建动画，先选中一个摄像机 3. 设置播放指定的摄像机动画：1关卡蓝图指定播放的matinee，2创建directorgroup 关卡蓝图指定播放的matinee先选中matinee 然后打开关卡蓝图 创建directorgroup选中创建动画的摄像机 -> 选中创建动画的摄像
ue4渲染速度太慢_UE4我们怎么看FPS帧速率
weixin_35910073的博客
02-22 1585
提到这个帧速率，我们大家只要玩过像LOL、屁股(守望先锋)等游戏都会有这个FPS数值是个什么意思了，我来引用一下百度百科的解释“FPS是图像领域中的定义，是指画面每秒传输帧数，通俗来讲就是指动画或视频的画面数。FPS是测量用于保存、显示动态视频的信息数量。每秒钟帧数越多，所显示的动作就会越流畅。通常，要避免动作不流畅的最低是30。某些计算机视频格式，每秒只能提供15帧。FPS”也可以理解为我们常说...
3.4.2_在canvas中编辑文本
jun_sun_shine的博客
05-08 2681
3.4.2_在canvas中编辑文本<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>在canvas中编辑文本</title> <style> body{ background: #eee; }
8.4.1.5_圆形与多边形之间的碰撞检测
jun_sun_shine的博客
06-29 1936
8.4.1.5_圆形与多边形之间的碰撞检测<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圆形与多边形之间的碰撞检测</title> <style> body{ background: #fff;
4.5.2.3_负片滤镜
jun_sun_shine的博客
05-12 1820
4.5.2.3_负片滤镜<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>负片滤镜</title> <style> body{ background: #eee; } #c
2.8.4_橡皮筋式的线条绘制
jun_sun_shine的博客
05-02 1456
2.8.4_橡皮筋式的线条绘制<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>橡皮筋式的线条绘制</title> <style> body{ background: #eee; }
8.4.2.2_利用最小平移向量使两个物体粘在一起
jun_sun_shine的博客
06-29 1256
8.4.2.2_利用最小平移向量使两个物体粘在一起<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>利用最小平移向量使两个物体粘在一起</title> <style> body{ background: #fff;
Android大屏手机动画优化：理解回流与重绘
这个问题的核心在于动画丢帧，即动画在播放时未能达到预期的每秒60帧（fps）速率，导致视觉上的卡顿或不平滑。本文将探讨这一现象背后的原因，以及与渲染优化相关的概念，如回流和重绘。 首先，我们需要理解Android...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值