我把平时工作应用到的笔记整理成几篇关于容器docker的文章，又发了几篇以前鼓捣的大前端全栈nodejs框架eggjs的笔记，结果读者寥寥。没想到随手写了一篇讲解gsap动画库的文章，竟然比所有文章加起来的数据还好，这这这……

好吧，那就随手再写个动画技巧吧。

愤怒的小鸟

先上第一个简单的效果图

我问过朋友之后，他们说我只写核心代码的行为十分可耻，就像告诉他们学好前端，一定能升职加薪，当上总经理，出任CEO，迎娶白富美，走向人生巅峰……

可怎么学，学什么，一概不说。好吧，我面壁……

不过还是要先说核心代码，为啥？因为太简单了！

代码如下：

.content {width: 718px;height: 634px;background: url("./img/bird.png") no-repeat;animation: .3s go steps(2) infinite;
}
@keyframes go  {0% {background-position-x: 0px;}100% {background-position-x: -1436px;}
}

学过css的对上面这几行代码都不会陌生吧，挑几个关键的简单解释下：

animation：动画属性，里面定义动画的各项参数。这里代表，动画时长0.3秒，动画名称go，steps缓动函数，将整个动画分为两步（两帧），infinite无限循环动画。

@keyframes:定义动画，这里定义了动画名称为go，效果是动画开始（0%）时，背景位置为0，动画结束（100%）时，背景位置为-1436px。具体用法可查看css基础知识，推荐菜鸟教程，讲得详细，最重要的是有内置编辑器，可以直接看效果。

核心代码讲解完毕，其实这种运动的动画，原理大部分很简单，就是如何实现在这个位置循环播放一连串动作的图片。

我想大部分前端博主讲到这里就不继续讲了，为啥，因为懒o(╯□╰)o

我吸取教训，本篇文章会把从素材图到做成动画，整个过程使用的工具都简单介绍一下。

一连串动作形成的图片，叫雪碧图，上面的小鸟图很粗糙的，只有两个动作合成，形如：

这就是为什么我们要用background-position-x来移动背景的位置了，因为两个图片连在一起，需要移动，才能隐藏上一个，显示下一个。

通过这个也就能看出为什么要用steps函数了，因为如果不做操作，背景图会缓动离开缓动显示，达不到在一个区域闪现整张雪碧图不同位置的效果。

上面动画所有代码如下：

<template><div style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%"><div class="content" style=""></div></div>
</template><script>export default {name: "index",data() {return {}},mounted() {},methods:{}
}
</script><style scoped>
.content {width: 718px;height: 634px;background: url("./img/bird.png") no-repeat;animation: .3s go steps(2) infinite;
}
@keyframes go  {0% {background-position-x: 0px;}100% {background-position-x: -1436px;}
}
</style>

框架用的是vue，ui框架是iview，大家可以看到，导航栏默认设置都没改

人物行走的动画

小鸟飞行动画虽然简单，但是其实已经应用了最核心的两行代码，其他动画不论复杂与否，只要是用雪碧图的形式实现的，原理就大差不差。

参考上面代码，完成任务行走的动画。

我们的素材图片如下：

实现代码如下：

<template><div style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%"><div class="content" style=""></div></div>
</template><script>export default {name: "index",data() {return {}},mounted() {},methods:{}
}
</script><style scoped>
.content {width: 293px;height: 634px;background: url("./img/walk.png") no-repeat;animation: 1.2s go steps(8) infinite;
}
@keyframes go  {0% {background-position-x: 0px;}100% {background-position-x: -2464px;}
}
</style>

可以看出来，除了根据不同尺寸的素材调整.content的宽高和background-position-x的位置，其他完全一样。

最终效果如下：

制作素材方法

上面的小鸟雪碧图，是用两个图合成：

css制作动画，语法简单，各种学习文档详细，当动画复杂度不高时，肯定是首选。

不知道哪个网站有问题，挂载链接时审核不通过，只能写网址了：

将不同的图片合并成雪碧图网站1：https://www.toptal.com/developers/css/sprite-generator

将不同的图片合并成雪碧图网站2：https://www.codeandweb.com/free-sprite-sheet-packer

动画素材网站：https://opengameart.org/content/monster-spritesheet

这个网站里有的是没合成的素材图，有的直接提供了雪碧图，人物行走的动画便是使用的成品图。

想要了解地表最强前端动画库gsap，可以参考我的另一篇文章：gsap实现星空效果动画

前端做卡通动画，简单到难以想象相关推荐

《蓝色协议BLUE PROTOCOL》如何做电影动画级别的卡通渲染？
近两年扎堆冒头的开放世界游戏里,模仿塞尔达做卡通渲染风格的产品不在少数. 在更重视技术侧的国内环境下,摆在这类产品面前的一道难题,是如何让卡渲与其他产品拉开视觉差异,形成自己的一套风格化表现.而对于概 ...
（简单课设）前端小白刚做的一个简单的移动端项目的分享和总结
前端小白刚做的一个简单的移动端项目的分享和总结所用技术为简单的div+css 直接上图片代码部分小滴服务接下来是企业项目部分接下来是我的小滴部分 (另外两个部分内容非常简单,没必要粘贴代码了 ...
【PR】简单一招教你使用蒙版做文字动画
更多PR简单技巧尽在专栏中,会一直更新PR使用技巧简单一招教你使用蒙版做文字动画效果图制作步骤还可以加一个文字的缩放,从小到大的过程博主微信欢迎交流效果图制作步骤点击选择的字幕点击钢 ...
教你用最简单的方法做布丁动画
以下文章版权归叶景天博客所有昨天教了大家如何利用.mask属性做遮罩动画,今天为大家介绍一个新的动画,老规矩,直接上效果图这是一个非常简单又简单的布丁动画,我们可以在很多手机APP里头都看见过这场 ...
html如何实现过渡效果,前端如何实现动画过渡效果
简介动画这个概念非常宽泛,涉及各个领域,这里我们把范围缩小到前端网页应用层面上,不用讲游戏领域的Animate,一切从最简单的开始. 目前大部分网页应用都是基于框架开发的,比如Vue,React等, ...
前端实现ppt动画播放（H5+C3+JS+JQ）
大家都应该用过ppt(Microsoft PowerPoint 2010)来做过一些可课件或者动画效果吧,其实,在ppt里面的动画在网页上也可以实现的,并且会更加炫酷.可以自己找个动画ppt来动动手实 ...
前端笔记：动画介绍与CSS动画说明
文章目录目的动画介绍 CSS动画 JavaScript动画 Canvas动画 SVG动画 CSS动画 CSS Transition CSS Animation timing-function CS ...
layui导入加载动画_厉害了！这个免费神器帮你无脑做施工动画
你好,这里是 BIMBOX.今天诚意给你安利一款好用免费的施工动画软件. 很多施工企业在建完模型后,都会用模拟动画的形式展示施工方案流程.做施工方案可视化评审.质量安全交底等.施工模拟动画这两年也成 ...
图像处理（二十一）基于数据驱动的人脸卡通动画生成-Siggraph Asia 2014
在现实生活中,我们经常会去评价一个人,长得是否漂亮.是不是帅哥美女,然而如何用五官的数据去评价一个人是否长得五官比例协调,我们却很难说出来,也就是你为什么觉得某个人长得漂亮?是因为她眼睛大,嘴巴小,还 ...

前端做卡通动画，简单到难以想象

愤怒的小鸟

人物行走的动画

制作素材方法

前端做卡通动画，简单到难以想象相关推荐

最新文章

热门文章