当前位置： 首页 > news >正文

动画开发

news 来源：原创 2024/4/29 23:42:32

做为单页面的展现形式，页面中的动画可谓是不可缺少的一部分。动画一可以用来吸引用户跟页面的交互；二可以增加页面丰富性

推啊常见的动画效果

由于推啊写的动画效果形式太多，这里就只列举了一些数据效果最好的动画效果形式
复制代码

CSS方法

1.1 CSS3中的transition来写动画

CSS3的动画属性transition写过渡型动画可谓是信手拈来。正是因为它写起来非常的简单快捷且在移动端兼容性比较好，所以在推啊动画中也是经常用到。具体用法介绍可以参考W3school官网transition属性介绍。

在这里举个在推啊动画中应用的小例子：

  • CSS代码
  .progress {
      ...
      transition: height 0.4s linear;
  }
复制代码

  • 效果如下图

    1.2 CSS3中的animation来写动画

    css3中的另一个动画属性animation,animation是用来写帧动画，此属性在推啊动画中也是到处可见，几乎每一个页面上的动画都会用到它，用起来也是简单快捷且兼容性好。具体用法介绍可以参考W3school官网animation属性介绍。

    在这里举两个在推啊动画中应用的小例子：

    • 第一个例子css代码
     .cat-cell {
       ...
       animation: wnPwx 0.3s 0s linear forwards;
      }
      @keyframes wnPwx {
        0% {
            transform: translate3d(0px, 0, 0);
        }
        10% {
            transform: translate3d(50px, -10px, 0);
        }
        20% {
            transform: translate3d(100px, -30px, 0);
        }
        30% {
            transform: translate3d(150px, 10px, 0);
        }
        40% {
            transform: translate3d(200px, 20px, 0) ;
        }
        50% {
            transform: translate3d(230px, 40px, 0) ;
        }
        60% {
            transform: translate3d(245px, 70px, 0);
        }
        70% {
            transform: translate3d(265px, 110px, 0);
        }
        80% {
            transform: translate3d(285px, 140px, 0);
        }
        90% {
            transform: translate3d(300px, 170px, 0) ;
        }
        100% {
            transform: translate3d(314px, 190px, 0);
        }
     }
复制代码

  • 效果如下图

  • 第二个例子css代码

     .niudan{
    ...
    animation: showball steps(22) 2.4s 1 0s;
 }
 @keyframes showball {
    0% {
        background-position-y: 0；
    }
    100% {
        background-position-y: 100%;
    }
 }
复制代码

  • 效果如下图

javascript方法

2.1 jQuery中的animate来写动画

animate() 方法执行 CSS 属性集的自定义动画。虽然这个方法用起来不如css属性写动画方便快捷，但是在推啊动画中偶尔也是会用到。具体用法介绍可以参考W3school官网animate() 方法。

在这里举一个在推啊动画中应用的小例子（弹层消失动画）：

  • javascript代码
fadeOut(options) {
    let _dom = $('.coupon-modal-showPrize');
      if ($('.J_modalShowPrize').length) {
        _dom = $('.J_modalShowPrize');
      }
      _dom.css({
        "background-color": 'rgba(0, 0, 0, 0)'
      }).animate({
        'translateY': _moveY + 'px'
      }, 800, 'ease-out', function () {
        $('.J_modalShowPrize').remove();
      });
      $('.coupon-modal-animate, .J_coupon-modal-animate').animate({
        'translateX': _moveX + 'px',
        'scale': 0
      }, 800, 'cubic-bezier(0.23, 0.21, 0.71, 1)');
      $('.coupon-modal-showPrize-dialog, .J_coupon-modal-showPrize-dialog').animate({
        'scale': 0
      }, 800, 'linear');
}

复制代码
  • 效果如下图

2.2 大佬提供的组件来写动画

由于animation中的steps()函数来写元素发生形变的动画有缺点，缺点是图片帧数过多会造成整体动画图片过大，图片帧数过少会造成动画看起来不太流畅，所以我们活动组的张敏大佬产出了一个写帧动画的组件，这里举例介绍一下用法：

      var $dom = document.getElementById('start');
  	var images = [
  		'http://yun.tuisnake.com/h5-mami/pluginAct/treasureBox/box.png',
  		'http://yun.tuisnake.com/h5-mami/pluginAct/treasureBox/act.png'
  	];
  	var map = ["0 0", "0 -917", "0 -1834", "0 -2751", "0 -3668", "0 -4585",
  	"0 -5502","0 -6419","0 -7336","0 -8253"];
  	repeat();
  	function repeat() {
  		var repeatAnimation = animation().loadImage(images).
  		changePosition($dom, map, images[0]).repeat(1);
  		repeatAnimation.start(80);
  	
  		var running = true;
  		$dom.addEventListener('click', function () {
  			if (running) {
  				running = false;
  				repeatAnimation.pause();
  			} else {
  				running = true;
  				repeatAnimation.restart();
  			}
  		});
  	}
复制代码

2.3 其他类型

其他类型的写法还有一些是利用javasript和css、html类名配合，在合适的时间改变特定的DOM的class类名来形成动画，这种写法由于代码太零碎，就不举例了。

canvas方法

canvas在推啊的应用范围

用canvas来写动画比CSS3和jQuery方法来写比较复杂。由于前端工程师熟练掌握canvas代码的不太多，加上写起来比较复杂，所以很多简单的推啊动画效果不会采用canvas方法来写。

canvas在推啊的实例

虽然canvas写动画有条件限制，但是此方法在写推啊动画效果方法中也是需要的，下面就介绍一个应用到的实例：

  • 刮刮卡动画
$('#card')
    .attr('width', 652 * window.remScale)
    .attr('height', 200 * window.remScale);
  let c = document.getElementById('card');
  let context = c.getContext('2d');
  let mouseDown = false;
  var scraping = {
    cardImg: new Image(),
    init: function() {
      var self = this;
      this.events();
      this.scratch();
    },
    events: function() {
      var self = this;
      $('.start-btn')
        .off('click')
        .on('click', function() {
          scraping.doStart();
        });
    },
    scratch: function() {
      var img = new Image();
      img.src = '//yun.tuisnake.com/h5-mami/adpages/dayReward/bottom.png';
      context.globalCompositeOperation = 'source-over';
      context.beginPath();
      img.onload = function() {
        context.drawImage(
          img,
          0,
          0,
          652 * window.remScale,
          200 * window.remScale,
        );
      };
      context.closePath();
      context.globalCompositeOperation = 'destination-over';
      // 手机兼容
      c.addEventListener('touchstart', scraping.startHandler, false);
      c.addEventListener('touchmove', scraping.moveHandler, false);
      c.addEventListener('touchend', scraping.endHandler, false);

      //PC兼容
      c.addEventListener('mousedown', scraping.mouseStartHandler);
      c.addEventListener('mouseup', scraping.endHandler);
      c.addEventListener('mousemove', scraping.mouseMoveHandler);
    },
    startHandler: function() {
      $('.start-tip2').hide();
      $('.result-show').show();
      mouseDown = true;
    },
    mouseStartHandler: function() {
      $('.start-tip2').hide();
      $('.result-show').show();
      mouseDown = true;
    },
    endHandler: function(e) {
      mouseDown = false;
      e.preventDefault();
      // 出插件
      $('#plugin').show();
      scraping.reInit();
    },
    moveHandler: function(e) {
      e.preventDefault();
      //获取鼠标位置
      var x =
        e.targetTouches[0].clientX -
        document.getElementById('card').getBoundingClientRect().left;
      var y =
        e.targetTouches[0].clientY -
        document.getElementById('card').getBoundingClientRect().top;

      context.globalCompositeOperation = 'destination-out';
      context.beginPath();
      context.arc(x, y, 40 * window.remScale, 0, 2 * Math.PI, true);
      context.fill();
      context.closePath();
    },
    mouseMoveHandler: function(e) {
      if (mouseDown) {
        e.preventDefault();
        context.beginPath();
        context.fillStyle = '#f00';
        context.arc(e.offsetX, e.offsetY, 40, 0, Math.PI * 2);
        context.fill();
        context.closePath();
      }
    },
    initCard: function() {
      var self = this;
      this.cardImg.crossOrigin = 'anonymous';
      this.cardImg.src =
        'http://yun.dui88.com/h5-mami/adpages/dayReward/bottom.png';
      if (this.cardImg.complete) {
        this.card.drawImage();
      } else {
        self.cardImg.onload = function() {
          self.card.drawImage();
        };
        self.cardImg.onerror = function() {
          if (_src.indexOf('webp') === -1 && typeof ''.ossimg === 'function') {
            _src = _src.ossimg();
            self.initCard(_src);
          } else {
            _src =
              '//yun.tuisnake.com' +
              _src.substring(_src.indexOf('/', 2), _src.length);
            self.initCard(_src);
          }
        };
      }
    },
  };

复制代码

具体效果可以访问此链接亲自体验，点击查看

Svga方法

SVGA 是一种同时兼容 iOS / Android / Web 多个平台的动画格式，可以很好的解决轻量单页面实现复杂动画的问题。

下面简单介绍一下使用方法：

step1

**Prebuild JS**
   Add <script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.1.0/build/svga.min.js"></script> to your.html

or 

**NPM**
  1.npm install svgaplayerweb --save
  2.Add require('svgaplayerweb') to xxx.js
复制代码

step2

你可以自行创建 Player 和 Parser 并加载动画

添加 Div 容器
<div id="demoCanvas" style="styles..."></div>
加载动画
var player = new SVGA.Player('#demoCanvas');
var parser = new SVGA.Parser('#demoCanvas'); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。
parser.load('rose_2.0.0.svga', function(videoItem) {
    player.setVideoItem(videoItem);
    player.startAnimation();
})
复制代码

Lottie方法

(缺少介绍方法)

GIF图片

GIF格式的一张图片就可以显示一个动画效果，我们也都知道虽然一张图片就可以搞定一些动画效果，非常简单快捷粗暴，但是它的缺点太大，一是图片占内存特别大，网速慢的话就会加载的很慢；二是GIF图片被浏览器容易不会播放动画，只会显示第一帧。所以GIF图片来做动画效果在推啊动画开发中不常见，用到的地方就是显示广告券图片。

转载于:https://juejin.im/post/5bbaf4636fb9a05ce7517823

相关文章：

  • 高性能架构-存储高性能-关系型数据库
  • While executing gem bad response Not Found 404
  • mysql重启，重启释放ibtmp1
  • 我是一个线程(修订版) 转
  • 从头编写一个 HTTP 静态资源服务器
  • 简单手撸代码进入SMP2018中文人机对话技术评测任务一前三甲
  • 小程序开发之插件功能的有效实现方法
  • 数据库 Oracle12c （三）：安装与启动
  • elasticsearch实战---中文拼音A-Z排序（完美解决）
  • NOIP2018 游记
  • Python 的经典设计格言，格言来源于 Python 但不限于 Python
  • 关于微信小程序登录，后端如何生成3rd_session？（后端为c#）
  • hadoop和spark的区别
  • 解决Composer 使用时要求输入授权用户名密码问题
  • Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能
  • 【面试系列】之二：关于js原型
  • eclipse(luna)创建web工程
  • ES6, React, Redux, Webpack写的一个爬 GitHub 的网页
  • Javascripit类型转换比较那点事儿，双等号（==）
  • JS+CSS实现数字滚动
  • Python - 闭包Closure
  • SegmentFault 2015 Top Rank
  • springMvc学习笔记（2）
  • 仿天猫超市收藏抛物线动画工具库
  • 官方解决所有 npm 全局安装权限问题
  • 前端技术周刊 2019-01-14：客户端存储
  • 前言-如何学习区块链
  • 为视图添加丝滑的水波纹
  • 我这样减少了26.5M Java内存！
  • 自定义函数
  • 你对linux中grep命令知道多少？
  • postgresql行列转换函数
  • (a /b)*c的值
  • （ISPRS，2023）深度语义-视觉对齐用于zero-shot遥感图像场景分类
  • （八）Docker网络跨主机通讯vxlan和vlan
  • (办公)springboot配置aop处理请求.
  • （附源码）php投票系统 毕业设计 121500
  • （附源码）小程序 交通违法举报系统 毕业设计 242045
  • （六）什么是Vite——热更新时vite、webpack做了什么
  • (求助)用傲游上csdn博客时标签栏和网址栏一直显示袁萌 的头像
  • （五）网络优化与超参数选择--九五小庞
  • （一）UDP基本编程步骤
  • (转)socket Aio demo
  • (转载)虚函数剖析
  • (轉貼) VS2005 快捷键 (初級) (.NET) (Visual Studio)
  • .[backups@airmail.cc].faust勒索病毒的最新威胁：如何恢复您的数据？
  • .bat批处理（三）：变量声明、设置、拼接、截取
  • .Net core 6.0 升8.0
  • .NET Core WebAPI中使用swagger版本控制，添加注释
  • .net core 控制台应用程序读取配置文件app.config
  • .net MVC中使用angularJs刷新页面数据列表
  • .net 提取注释生成API文档 帮助文档
  • .NET/C# 获取一个正在运行的进程的命令行参数
  • .NET/C# 使窗口永不获得焦点
  • .NETCORE 开发登录接口MFA谷歌多因子身份验证