利用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的知识挑出其中所有是大一的女生的的名字哦. 学生信息如下 ...
随机推荐
- Web开发面临的挑战主要有哪些？
摘要:要成为一名高效的Web开发者,这需要我们做很多工作,来提高我们的工作方式,以及改善我们的劳动成果.而在开发中难免会遇到一些困难,从前端到后端. 导读:要成为一名高效的Web开发者,这需要我们做很 ...
- 【Java_基础】空串、空格串、null的区别
1.表示的区别 string str1 = ""; //空串 str1.length() 等于 0 string str2 = " "; / ...
- shell-code-5-函数
# 函数必须在使用前定义 # 如果不写return,将以最后一条命令运行结果,作为返回值. return后跟数值n(0-255) myFistFunc(){ read a read b return ...
- LeetCode（90） Subsets II
题目 Given a collection of integers that might contain duplicates, nums, return all possible subsets. ...
- Java技术——Java中的内存泄漏
． OOM的常见类型 按照JVM规范,JAVA虚拟机在运行时会管理以下的内存区域: 程序计数器:当前线程执行的字节码的行号指示器,线程私有. JAVA虚拟机栈:Java方法执行的内存模型,每个Java ...
- [转]构建Python+Selenium2自动化测试环境（二）
构建Python+Selenium2自动化测试环境完成之后,就需要测试支持python的selenium的版本是否都支持在不同浏览器上运行,当前我们分别在三个最通用的浏览器上通过脚本来测试. 1.在I ...
- appium+python自动化-adb shell模拟点击事件(input tap)
前言 appium有时候定位一个元素很难定位到,或者说明明定位到这个元素了,却无法点击,这个时候该怎么办呢? 求助大神是没用的,点击不了就是点击不了,appium不是万能的,这个时候应该转换思路,换其 ...
- JavaWeb基础（HTML）
代码改变世界 HTML HTML是指超本标记语言,它不是编程语言,而是一种标记语言.标记语言是一套标记标签,HTML使用标记标签来描述网页,用以定义如何在页面上展示信息. 1.HTML标签 HTML标 ...
- Ubuntu Flask安装与配置（待整理）
工作中开发需要用到python的flask框架,无奈网络上的资源很少,连基本的安装和配置都不全,在这做一下整理,方便以后用到. ———————————————————————————— 由于比较繁琐, ...
- [UOJ#127][BZOJ4195][NOI2015]程序自动分析
[UOJ#127][BZOJ4195][NOI2015]程序自动分析 试题描述 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2, ...