前端特效:Javascript,css animation,GIF,Lottie

特效在9102 前端营销广告或者H5或者纯粹广告图的方式司空见惯,但总有新的替代方式。虽然特效越来越复杂,但特效制作的制作过程却越来越简便。最近做了个项目使用到了最新的实现技术，以下会对比相应的技术实现。

一，前端JS库实现特效

jQuery animat，canvas库等等

二，CSS动画库实现

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
详情：https://github.com/daneden/animate.css

三，GIF动图

1.PS制作gif动图

2.借助在线工具http://gif.55.la/

四，Lottie特效

（1）普通web PC端使用Lottie

引入：https://labs.nearpod.com/bodymovin/demo/markus/halloween/lottie.min.jsvar svgContainer = document.getElementById('svgContainer');var animItem = bodymovin.loadAnimation({wrapper: svgContainer,animType: 'svg',loop: true,path: 'https://labs.nearpod.com/bodymovin/demo/markus/isometric/markus2.json'});

（2）Vue单页SPA使用Lottie

安装 npm install --save vue-lottie组件使用：import * as lottieData from './lottie/lottie.json' //任意lottie格式jsonimport Lottie from 'vue-lottie/src/lottie.vue'data(){return {lottieOptions:{animationData:lottieData.data}}},components:{Lottie},methods:{lottieCreated(anim){this.anim = anim}}<template><Lottie :options="lottieOptions" :height="60" :width="60" @animCreated="lottieCreated"/></template>

（3）小程序使用Lottie

baidu：animation-view  https://smartprogram.baidu.com/docs/develop/component/base/#animation-view/wechat：没有具体使用 https://github.com/landn172/lottie-miniappalipay:暂无

（4）react使用Lottie

1.安装 npm install --save react-lottie
2.导入:import React from 'react'import Lottie from 'react-lottie'; import * as animationData from './pinjump.json' //lottie json data
3.使用render：const defaultOptions = {loop: true,autoplay: true, animationData: animationData,rendererSettings: {preserveAspectRatio: 'xMidYMid slice'}};<Lottie options={defaultOptions}height={400}width={400}isStopped={true}isPaused={true}/>

（5）react-native使用Lottie

1.下载依赖包  npm i --save lottie-react-native2.添加到libs中： react-native link lottie-react-native //会修改诸多文件,测试使用时请勿在相关正式开发项目中使用3.JSX 详情：https://www.npmjs.com/package/lottie-react-native   import React from 'react';import LottieView from 'lottie-react-native';export default class BasicExample extends React.Component {render() {return <LottieView source={require('./animation.json')} autoPlay loop />;}}

(6)阿里犸良特效编辑器

使用步骤：1.前往 https://design.alipay.com/emotion/editor开启设计2.将设计好的json文件导出来3.将json文件引入到项目之中作为静态数据4.在项目中的使用参考以上(1)(2)(3)(4)(5)

前端特效:Javascript,css animation,GIF,Lottie相关推荐

【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...
H5+css+js前端特效源代码：发光动画按钮：上传按钮
前端特效:发光动画按钮:上传按钮 H5+CSS+JS 骨架+皮肤+功能效果展示源代码: H5部分: <!DOCTYPE html> <html lang="en&quo ...
前端复习HTML+CSS+JavaScript（必问面试题）
前端复习 HTML 常见的几种图片格式以及他们之间的区别是什么? JPG:支持有损压缩.不支持透明.不支持动画.色彩还原度较好 PNG:不支持压缩.支持透明.半透明.不透明.不支持动画 GIF:支持有 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
HTML5期末大作业：动漫网站设计—— 动漫电影《你的名字》(7页)带音乐特效 HTML+CSS+JavaScript
HTML5期末大作业:动漫网站设计-- 动漫电影<你的名字>(7页)带音乐特效 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制 ...
HTML5期末大作业：明星个人主页介绍网站设计——明星薛子谦(7页)带轮播特效 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计大学生毕设网页设计
HTML5期末大作业:明星个人主页介绍网站设计--明星薛子谦(7页)带轮播特效 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计大学生毕设网页设计源码H ...
CSS魔法堂：更丰富的前端动效by CSS Animation
前言在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...
python和html可以同时学吗_web前端入门：css+html5+javascript同时学可以吗？
HTML+CSS+JS是前端基础核心知识,肯定是都要学的.在web前端中,HTML是结构标准,CSS是样式标准,JS是行为标准,三者缺一不可.说的直白点,HTML就是骨架,CSS就是皮肤,JS就是灵魂 ...
【Web前端】html+css+javascript
1 HTML 1.1. HTML基本概念 HTML:hyper text markup language 超文本标记语言,就是超出纯文本范畴的语言,其中既可以定义文本也可以定义图片,超链接等等非文本性 ...

前端特效:Javascript,css animation,GIF,Lottie

前端特效:Javascript,css animation,GIF,Lottie相关推荐

最新文章

热门文章