html钢笔特效,HTML5 SVG在文章中使用钢笔圈词画线连接的动画
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
console.clear();
var paddingX = 8;
var paddingY = 4;
var svg = document.querySelector("#svg");
var srcText = document.querySelector(".src-text");
var tgtText = document.querySelector(".tgt-text");
var randomBtn = document.querySelector("#random-btn");
var replayBtn = document.querySelector("#replay-btn");
var arrowPath = document.querySelector(".arrow-path");
var circlePath = document.querySelector(".circle-path");
var split = new SplitText(".text-block", {
type: "words"
});
var allWords = split.words;
var numWords = allWords.length;
var circleBox = circlePath.getBBox();
var animation = new TimelineMax();
var srcWord = null;
var tgtWord = null;
var requestId = null;
window.addEventListener("resize", resize);
replayBtn.addEventListener("click", replay);
randomBtn.addEventListener("click", randomize);
TweenLite.set([arrowPath, circlePath], {
autoAlpha: 1,
drawSVG: 0
});
selectWords();
function selectWords() {
cancelAnimationFrame(requestId);
var index1 = Math.floor(Math.random() * numWords);
var index2 = Math.floor(Math.random() * numWords);
if (index1 === index2) {
return selectWords();
}
srcWord = allWords[index1];
tgtWord = allWords[index2];
srcText.innerHTML = "Source Word = " + srcWord.textContent;
tgtText.innerHTML = "Target Word = " + tgtWord.textContent;
animation.seek(0);
updateAnimation();
}
function updateAnimation() {
// Save animation progress
var progress = animation.progress();
// Clear animation
animation.seek(0).clear();
var svgBounds = getBounds(svg, 0, 0);
var srcBounds = getBounds(srcWord, paddingX, paddingY);
var tgtBounds = getBounds(tgtWord, 0, 0);
var x1 = (srcBounds.left - svgBounds.left) + srcBounds.width / 2;
var y1 = (srcBounds.top - svgBounds.top) + paddingY;
var x2 = (tgtBounds.left - svgBounds.left) + tgtBounds.width / 2;
var y2 = (tgtBounds.top - svgBounds.top) + paddingY;
var dx = x1 - x2;
var dy = y1 - y2;
var rx = Math.abs(dx * 0.6);
var ry = Math.max(Math.abs(dy * 1.35), 100);
var sweepFlag = dx < 0 ? 1 : 0;
var data = "M" + x1 + " " + y1 + " A " + rx + " " + ry + " 0 0 " + sweepFlag + " " + x2 + " " + y2;
arrowPath.setAttribute("d", data);
TweenLite.set(circlePath, {
scaleX: srcBounds.width / circleBox.width,
scaleY: srcBounds.height / circleBox.height,
x: srcBounds.left - svgBounds.left,
y: srcBounds.top - svgBounds.top
});
// Rebuild animation
animation
.to(circlePath, 1, {
drawSVG: true
})
.to(arrowPath, 0.5, {
drawSVG: true
})
.to(tgtWord, 0.2, {
color: "red"
})
.progress(progress || 0)
requestId = null;
}
function getBounds(element, paddingX, paddingY) {
paddingX = paddingX || 0;
paddingY = paddingY || 0;
var rect = element.getBoundingClientRect();
return {
left: rect.left - paddingX,
top: rect.top - paddingY,
width: rect.width + paddingX * 2,
height: rect.height + paddingY * 2,
};
}
function resize() {
if (!requestId) {
requestId = requestAnimationFrame(updateAnimation);
}
}
function replay() {
animation.play(0);
}
function randomize() {
selectWords();
}
html钢笔特效,HTML5 SVG在文章中使用钢笔圈词画线连接的动画相关推荐
- html5列表菜单特效,HTML5 SVG汉堡包菜单按钮分段动画特效
这是一款效果非常炫酷的HTML5 SVG汉堡包菜单按钮分段动画特效.该菜单按钮特效在用户点击汉堡包按钮时,按钮会分割为多段,并旋转变形为关闭按钮的状态.当再次点击该按钮时,它会逆向变形为汉堡包图标. ...
- html网站点击特效,HTML5 svg和CSS3炫酷鼠标点击按钮特效
这是一组效果非常炫酷的HTML5 svg和CSS3鼠标点击按钮特效.这组鼠标点击特效共有22种效果,大多数是在伪元素上使用CSS3 animations来制作动画效果.非常适合于移动手机APP上的按钮 ...
- html5按钮自动特效,HTML5 svg和CSS3 22种炫酷鼠标点击按钮特效
这是一组效果非常炫酷的HTML5 svg和CSS3鼠标点击按钮特效.这组鼠标点击特效共有22种效果,大多数是在伪元素上使用CSS3 animations来制作动画效果.非常适合于移动手机APP上的按钮 ...
- html map热点特效,html5 svg卡通世界地图热点动画特效
特效描述:html5 svg 卡通世界地图 热点动画特效.html5 svg绘制圆形世界地图热点线性动画展示特效. 代码结构 1. 引入JS 2. HTML代码 var select = functi ...
- JAVA实现中点画线_实验1-中点画线和Bresenham画线算法的实现
<实验1-中点画线和Bresenham画线算法的实现>由会员分享,可在线阅读,更多相关<实验1-中点画线和Bresenham画线算法的实现(9页珍藏版)>请在人人文库网上搜索. ...
- html5中如何让一个动画框左右上下浮动,HTML5 SVG如何实现炫酷checkbox复选框动画特效...
简要教程 这是一款HTML5 SVG炫酷checkbox复选框动画特效.该checkbox动画特效使用svg来构建复选框效果,然后通过CSS3动画来控制复选框的选中和取消选中状态,效果非常炫酷. 使用 ...
- html5 loading游戏,12种炫酷html5 svg加载loading动画特效
12种炫酷html5 svg加载loading动画特效 刘振兴 代码分享 2015年11月23日 14182 3条评论 这是一款使用HTML5 SVG技术制作的12种炫酷html5 svg加载load ...
- html5圆形提交按钮样式,HTML5 SVG带圆形进度条动画的提交按钮特效
这是一款非常实用的HTML5 SVG带圆形进度条动画的提交按钮特效.该提交按钮在被点击之后,按钮变形为一个圆形的进度条,当进度条运行一周之后,可以设置提交成功和提交失败的两种按钮状态. 制作方法 HT ...
- html爆炸效果,HTML5 SVG炫酷文字爆炸特效
这是一款使用html5 svg.css3和js制作的炫酷文字爆炸特效.不论是HTML还是CSS都没有能力将文字分割成小块,但是SVG可以实现这个效果. 制作SVG文字 可以使用矢量图制作工具,如Ado ...
最新文章
- linux的 0号进程(idle进程) 和 1 号进程(init进程)
- 节点、支路、回路的概念
- 编辑docker容器中的文件
- 结账任务 - 年终结账
- RTX5 | 事件标志组03 - 线程同步(逻辑或)
- modem(2)---Android modem log查看
- 服务器中anaconda如何修改环境变量,手动添加anaconda3到环境变量中的方法
- linux exit 流程,Shell exit流程控制语句及用法
- 搭建GraalVM环境
- 利用maven命令将外部jar包导进maven仓库
- 软件推荐,强力卸载软件geek uninstaller
- 女生干前端开发个人思考
- python项目:基于OpenCV的学生网课睡意检测系统
- 测试经典面试问题:一个项目从0到1,你需要做哪些工作?工作的重点是什么?
- ansible:jinja2对特殊符号的处理
- ie input兼容 vue_IE浏览器兼容问题(基于vue)
- 云计算和雾计算的区别?
- IC617 PDK CDB格式转OA格式
- python基础教程视频纸飞机_叠飞机怎么叠
- go的beego搭建
热门文章
- Tutorial教程:生成triplet训练基于triplet loss的深度模型
- 基于springboot+layui的前后端分离高校教材管理系统源码
- 联想小新pro16和联想拯救者r9000x的区别 哪个好
- 移动硬盘无法识别,磁盘图标不显示解决方法介绍
- 长沙市区块链技术应用行业协会助力BSN湖南发展
- 两分钟解决Unity谜之问题,License error,Unity2021打不开
- 「网络工程师学习笔记」思科网络设备常用配置命令与基础管理
- 容器运行过程中异常处理
- BC78,hdu5655,5656。%%%%CA娘
- [HAOI2012] 高速公路