利用javascript实现在圆周上匀速划动的动画效果
先看下效果：
圆心下的那个那个白圈的位置是光圈的起始位置，光圈所在的位置为终点位置。光圈从起始位置开始，沿着圆的轮廓匀速到终点位置。
在支持css3的情况下，可以利用css3做旋转效果来达到这种效果。具体思路为：
1）将光圈相对于圆进行绝对定位，设置光圈的绝对位置为上面所说的终点位置；
2）对圆设置一个旋转角度，如：transform: rotate(130deg)，此时，光圈也会改变位置，光圈旋转后的位置为上面所说的起点位置。
3）然后对圆设置transition，如：transition: transform .6s ease-out;这样会在0.6s内将光圈从起点位置旋转到终点位置。
在不支持css3的情况下，如IE9及IE9以下的浏览器，我使用的是javascript实现。具体思路为：
1）对圆心进行相对定位，对光圈进行绝对定位，设置圆的起始位置（在圆心的正下方）
2）以圆心为中心点，光圈的起始位置可以看做是-90读的地方，现在要将光圈从-90度到45度。做法就是通过不断的改变角度，从-90到45（这里需要使用定时器），根据每次的角度和圆的半径，首先获取弧度，再根据js中的Math对象的sin()和cos()获取光圈的x,y坐标（相对与圆心）。
3）根据每次得到的x,y坐标计算光圈的left,top值。由于角度是慢慢改变的，因此呈现的效果就是光圈从-90度到45度匀速划动。
实现的代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rotate</title>
<style>
#box{
width: 80px;
height: 80px;
background-color: limegreen;
border-radius: 50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
padding-top: 1px;
} #box .circle-dot{
position: relative;
margin-top: 39px;
margin-left: 40px;
width: 1px;
height: 1px;
} #box .circle-dot #light{
position: absolute;
width: 30px;
height: 30px;
background:url(images/light.png) no-repeat;
left: -15px;
top: 25px;
}
</style>
</head>
<body>
<div id="box">
<div class="circle-dot">
<dev id="light"></dev>
</div>
</div>
<script>
window.onload=function(){
var light = document.getElementById("light");
var circle = document.getElementById("box");
rotate(light,circle);
//js控制光圈划动
function rotate(ele,circle){
var r = circle.clientWidth/2;
var rotate = -91;
var timer = setInterval(step,10);
function step(){
rotate += 3;
var a = 2*Math.PI/360*rotate;
if(rotate == 44){
clearInterval(timer);
}
var x = r * Math.cos(a)-15; //光圈宽高为30，减去15是让光圈的中心在圆周上
var y = -r * Math.sin(a)-15;
ele.style.left=x+"px";
ele.style.top=y+"px";
}
}
}
</script>
</body>
</html>
利用javascript实现在圆周上匀速划动的动画效果的更多相关文章
- [ASP.NET] 如何利用Javascript分割檔案上傳至後端合併
最近研究了一下如何利用javascript進行檔案分割上傳並且透過後端.特地記錄一下相關的用法 先寫限制跟本篇的一些陷阱 1．就是瀏覽器的支援了 因為本篇有用到blob跟webworker 在ie中需 ...
- 利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
原文地址 http://www.jb51.net/article/33640.htm 在通过Javascript实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性 ...
- 利用javascript和WebGL绘制地球 【翻译】
利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...
- JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
- GitHub Android 最火开源项目Top20 GitHub 上的开源项目不胜枚举，越来越多的开源项目正在迁移到GitHub平台上。基于不要重复造轮子的原则，了解当下比较流行的Android与iOS开源项目很是必要。利用这些项目，有时能够让你达到事半功倍的效果。
1. ActionBarSherlock(推荐) ActionBarSherlock应该算得上是GitHub上最火的Android开源项目了,它是一个独立的库,通过一个API和主题,开发者就可以很方便 ...
- 如何利用express新建项目（上）
如何利用express新建项目(上) 摘要 这篇文章将讲解了如何快速利用express新建项目 一.express4.x的安装 1. npm install -g express 2. npm ins ...
- ASP利用xhEditor编辑器实现图片上传的功能。
本人这几天在做一个软件,无意中用到xhEditor在线编辑器,这个编辑器虽然看着比较简单,但功能非常强大,大家可以去官网上查看,废话不说了. 这篇文件主要是实现在ASP环境中利用xhEditor编辑器 ...
- (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能
利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...
- JS控制语句 编程练习 学生数据，分别是姓名、性别、年龄和年级，接下来呢，我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦。
编程练习 在一个大学的编程选修课班里,我们得到了一组参加该班级的学生数据,分别是姓名.性别.年龄和年级,接下来呢,我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦. 学生信息如下 ...
随机推荐
- 【Java基础】java中的反射机制与动态代理
一.java中的反射机制 java反射的官方定义:在运行状态下,可以获取任意一个类的所有属性和方法,并且可通过某类任意一对象实例调用该类的所有方法.这种动态获取类的信息及动态调用类中方法的功能称为ja ...
- Linux菜鸟起飞之路【四】绝对路径、相对路径及常用目录
一.绝对路径与相对路径 Linux操作系统中存在着两种路径:绝对路径和相对路径.我们在访问文件或文件夹的时候,其实都是通过路径来操作的.两种路径在实际操作中能起到同等的作用. 在开始具体介绍之前,我们 ...
- 关于Linux上的SSH服务无法启动，提示“/var/empty/sshd must be owned by root and not group or world-writable”错误
首先通过物理终端进入到linux上,手工检查ssh发现没运行# /etc/init.d/sshd statussshd is stopped 手动启动服务,发现报告权限错误.# /etc/init.d ...
- Many-to-one
创建模型 from django.db import models class Reporter(models.Model): first_name = models.CharField(max_le ...
- Python Cookbook3 Python进阶教程 http://python3-cookbook.readthedocs.io/zh_CN/latest/copyright.html
http://python3-cookbook.readthedocs.io/zh_CN/latest/copyright.html
- Verilog学习笔记基本语法篇（八）········ 结构说明语句
Verilog中的任何过程都可以属于以下四种结构的说明语句; 1) initial; 2) always; 3) task; 4) function; 1) initial说明语句: 一个程序 ...
- python图像插值
最近邻:选择离它所映射到的位置最近的输入像素的灰度值为插值结果. 最临近插值 图像的缩放很好理解,就是图像的放大和缩小.传统的绘画工具中,有一种叫做“放大尺”的绘画工具,画家常用它来放大图画.当然,在 ...
- Cypress EZ-USB FX3 DMA模式下的串口通讯
由于公司设备升级后出了问题,需要对USB驱动进行修改,原本使用的是寄存器模式进行UART传输,但是由于FX3寄存器模式会出现长时间延时等待的问题,不得不对其传输模式进行修改.虽然赛普拉斯的EZ-USB ...
- java中的equals与==的区别
equals是Object类的公共方法,方法内部是用==实现的.但是很多类都重写了equals方法,例如基本数据类型的封装类和String类,重写后比较的是对象的值或者内容是否相同.而==是比较地址, ...
- sublime text 3搭建python 的ide
感谢大佬-->原文链接 1. 打开Sublime text 3 安装package control Sublime Text 3 安装Package Control 2. 安装 SublimeR ...