每周一点canvas动画——《支付宝价格拖动选择》
2018-02-11
阅读 5 分钟
9.6k效果源码 终于到年底了，再过两天我也要回家过年了，想想就激动呢！今天给大家带来一个基于移动端的canvas价格选择效果。 主要功能就是拖动标尺变动价格。而且支付宝和京东金融的里也有这样的效果（果然天下设计都是你抄我我抄你啊?）。 效果演示地址 1.实现思路 整个效果的核心就是用canvas绘制的标尺。一共包括标尺主...
《每周一点canvas动画》——圆周运动
2017-02-20
阅读 5 分钟
10.1k圆周运动可以分为两种基本的形式：正圆运动和椭圆运动。在讲解圆周运动之前，必不可少的数学公式即将袭来。so,各位骚年们，请护好自己的膝盖。听不懂没关系，只要明白其中的原理就行。当然，能懂是最好的，这对后面学习高级动画是很有帮助的。好吧，废话少说直接上菜。
《每周一点canvas动画》——修改增强版
2017-02-16
阅读 1 分钟
3.8k2016年的某一天，不小心看了下自己写的几篇文章，瞬间被恶心到了。 语句不通顺 废话一大堆 标点符号错乱 图片丑陋 排版恶心 缺少实际demo,并且没有直观的在线体验效果 毅然决然的删掉了以前的文章，在此给大家带来的不便希望谅解。本周已经开始对删除的文章着手回复，目前进度如下：《每周一点canvas动画》——序《每周一...
《每周一点canvas动画》——canvas特效插件
2016-12-27
阅读 2 分钟
16k很长时间没有更新文章了，经过几个月的时间，事情终于忙完了。今天，在这里为大家分享3款canvas特效插件，与其说是分享，不如说是为了方便使用，对前面章节的一些效果的封装。
《每周一点canvas动画》——差分函数的妙用
2016-10-18
阅读 6 分钟
10.2k好像上次更新还是十一前，这唰唰唰的就过去大半个月了，现在更新我也没什么不好意思的。这次我们不涉及canvas 3D的内容，主要分享一个比较炫的动画效果，可以算是上一篇文章《每周一点canvas动画》——3D点线与水波动画的加强版。动画效果来自codePen。在这篇文章中我们就分析这种效果是如何实现的，如果你对源码比较懵逼...
《每周一点canvas动画》——3D点线与水波动画
2016-09-25
阅读 6 分钟
10.4k好像上次更新还是十一前，这唰唰唰的就过去大半个月了，现在才更新实在不好意思。这次我们不涉及canvas 3D的内容，主要分享一个比较炫的动画效果，可以算是上一篇文章《每周一点canvas动画》——3D点线与水波动画的加强版。动画效果来自codePen。在这篇文章中我们就分析这种效果是如何实现的，如果你对源码比较懵逼，相信...
《每周一点canvas动画》——森林与星海
2016-09-03
阅读 5 分钟
15.9k三维系统中实现重力效果的方式与二维的情况一样，设定一个重力值，比如g=0.2。然后，在动画循环中将它作用于物体竖直方向的速度上。虽然原理上没有什么大的变化，但是多了一个维度实现出来的效果确实相当具有视觉冲击力的。ok，一图胜千言，与其在这听我嘚吧嘚吧嘚，还不如直接上个效果图。
《每周一点canvas动画》——角度反弹
2016-07-10
阅读 5 分钟
12.1k就可以计算出做圆周运动时物体的下一个坐标位置。本节的内容与上一节的内容息息相关。所以，务必把上一节的内容弄懂了，再来看这一节你就不会那么吃力了。这也应该是本系列最难的一部分吧！请收下我的膝盖。。。
《每周一点canvas动画》—— 文字粒子
2016-06-13
阅读 6 分钟
22.2k每周一点canvas动画系列文章目前已经更新了12篇，今天给大家发个福利。我们使用canvas来制作一个小的效果。这个小效果是我从codePen上看到的，我对其做了些修改增强，添加了一些新的功能。UI界面就如下图中看到的样子。我们要实现的效果就如我在图中操作的那样，在输入框中输入文字（不管中文，还是英文，还是各种表情也...
《每周一点canvas动画》——速度与加速度(2)
2016-04-30
阅读 8 分钟
15.5k在上一节中我们介绍了速度的基本概念，包括沿坐标轴的速度，和更普适的任意方向的速度，在文章的最后我们做了一个鼠标跟随的示例，以及通过改变物体的rotation属性做了一个关于速度的扩展。通过上一节的学习你会发现我们的物体可以沿着任意方向运动，但是这还远远不够，因为我们的物体都是在做匀速运动。既然有匀速运动...
《每周一点canvas动画》——波形运动
2016-04-17
阅读 5 分钟
17.9k在上一节我们介绍了canvas动画中有关三角函数的内容，以及一个跟随鼠标旋转的箭头动画。这一节主要介绍三角函数的波形运动。包括： 平滑运动 线性运动 脉冲运动 1.Sin函数的波形 sin函数的波形想必骚年们不会感到陌生，其图形如下所示： 如果想要取得sin函数在[0, 2π]之间的值，非连续的情况下，可以这样估算。 {代码......
《每周一点canvas动画》——三角函数
2016-04-12
阅读 4 分钟
14.3k本节主要内容有： 三角函数介绍 常用三角函数解析 鼠标跟随角度旋转 看到三角函数，勾股定理这样的数学名词是不是有种双腿打颤的感觉啊！好吧，就算你已经吓尿了，也不能否认我们中学学习的知识终于有了用武之地，挽起袖子，开整！！！ 1、三角函数 什么是三角函数呢？简单的定义：所谓三角函数，在几何上来说就是夹角与...
《每周一点canvas动画》——用户交互
2016-04-06
阅读 7 分钟
18.5k用户交互也许是我们学习canvas动画中首先需要掌握的部分。毕竟，如果没有交互或者向动画中做一些动态的输入，那么这跟看电影有什么区别呢？用户交互基于事件，一般来说包括：鼠标事件，触摸事件和键盘事件。
- 1(current)
- 下一页