timeAxis.js--一个简单的时间轴JS框架--仿苹果官网
代码已经上传到Github,希望各位大佬指教。
ReadMe还是以GitHub为准
GitHub地址:https://github.com/royalknight56/timeAxis.js
基本实现了苹果官网的所有变化动画,简单易用的html框架
用法
模仿了苹果官网的滑动变化效果
由于网站的变化元素很多,我使用了JS来抽象出一个时间控制的简单框架,只需要在html元素的属性中加入控制属性
就可以控制元素的变化
timeAxis.js
make html move
引入
通过src引入,放在文档末尾
<script src="sjl.js"></script>
在script中创建新的timeJS类的对象
构造函数中传入配置object
参数分别有
speed控制手动速度
autoSpeed控制自动播放速度
没有这个属性的话脚本会自动设置为1
let tim=new timeJS({speed:1,autoSpeed:10})
其他配置选项
death和birth
规定了全局的开始时间和结束时间
动画不会播放到这个时间之外
delay
规定了动画的转换延迟,原理是定义transition属性,使动画通过transition属性来更加顺滑
定义之后还会解决visible的问题(两个动画不在同一时间却重叠在一起)
例子:
delay:0.2
上面定义延迟为0.2s
使用
使用tp标签
此脚本会寻找所有tp和autotp标签,并使他们运动
<tp>tp指手动控制
</tp><autotp>autotp指此元素会自动播放
</autotp>
时间
控制动画,就需要关键帧,关键帧节点的时间是由f-time属性控制的 格式是 关键帧时间1(开始时间)/关键帧时间2/......关键帧时间n(结束时间)
<tp f-time="1000/1100/1400/2000">这个节点在1000时出现经过1100,1400,在2000时消失
</tp>
以上例子是指Email会在1000时显示,2000时消失
变化
只有关键帧而没有变化是无意义的 在f-value属性中,可以定义每个时间段的CSS属性值
格式是 变化值1(开始时间)/变化值2/......变化值n(结束时间)
<tp f-value="00,0/30,0/400,0/900,0" f-time="1000/1100/1400/2000">Email
</tp>
属性绑定
我们可以将变化值通过f-bind绑定在其他属性上 f-bind中:使用/分隔每个CSS属性 使用,分隔每个属性的属性名和单位 比如 left,$px中,会使f-value中的每个关键帧的第一值绑定到left属性中 格式为$px,变化的值会自动填写在$中
<tp
f-value="700,200/800,200/700,100/700,200"
f-bind="left,$px/top,$px"
f-time="1000/1100/1400/2000">这个节点在1000时出现,left值为700 px,top值为200 px;在1100时,left值为800 px,top值为200px;
</tp>
<tp
f-value="1700,300,300/700,300,360/700,300,360"
f-bind="left,$px/top,$px/transform,rotate($deg)"
f-time="600/700/1000">这个节点时间从600到1000变化的属性是left,top,transform,变化值的单位是px,px,rotate($deg),即它会平行移动并且转动
</tp>
在上个例子中,我们绑定了transform,rotate($deg) 会使当前元素旋转
控制
本脚本的帧主要通过[右键],[下键],[滑轮向下]来前向播放 通过[左键],[上键],[滑轮向上]来反向播放 tpauto的标签的元素会自动播放
动画循环
f-ifsave用来控制元素的保留,或者动画的循环
<tp
f-ifsave="auto"
f-value="1700,300,300/700,300,360/700,300,360"
f-bind="left,$px/top,$px/transform,rotate($deg)"
f-time="600/700/1000" style="font-size: 30px;">这个元素会在时间之后一直循环
</tp><tp
f-ifsave="true"
f-value="1700,300,300/700,300,360/700,300,360"
f-bind="left,$px/top,$px/transform,rotate($deg)"
f-time="600/700/1000" style="font-size: 30px;">这个元素会在时间之后固定
</tp>
共有三种值:false(默认值) 当前元素在时间之外会消失 true:当前元素在时间之后会保留 auto:当前元素会永远循环播放
管道
f-opt可以使用管道
在下面的例子中,使用了名为rand的管道
管道使得所有的值通过这个管道函数的变化后再渲染出来
<autotp
f-ifsave="auto"
f-time="0/400"
f-value="-30/120"
f-bind="left,$%"
style="position: relative;top:200px;font-size: 50px;color: aliceblue;"
f-opt="rand">0101010101111001011010</autotp>
定义管道函数需要使用timeJS类中的bind方法
bind方法参数:object{管道名:管道函数function}
在下面的例子中定义的rand会使得所有值随机
tim.bind({rand:function(pos){return Math.random()*100-50;},})
如果一个元素没有设定f-time f-bind
而设定了f-value和f-opt
则他会在页面执行时将value中的值全部应用到opt中
可以参见demoPPT中的播放控制组件的用法
timeJS中的方法
stop() start()
stop会停止播放,只有start之后才会继续进行,
bindCtrl() bindAutoCtrl()方法
bindCtrl(time,function,ifonce)
用例: 以下代码在300的autoTime(自动播放时间值)时会调用函数,false指定他是会重复调用的(true则是一次性的)
tim.bindAutoCtrl(300, function () {tim.stop();console.log("stop");}, false)
bindCtrl会绑定手动播放时间值
setTime() getTime() setAutoTime() getAutoTime()方法
setTime(num)方法
重新设定手动播放时间值,会渲染出设定值的画面
getTime()方法
会取得手动播放时间值
auto类别的同理
更多
期待的特性
//timeCtrl 已实现
未来
为什么使用html来控制动画 我考虑到可以通过html的简单属性就可以完成大部分动画效果 因此,未来有可能通过一些工具就可以可视化的设置动画,让动画效果广泛的应用在html中 即时你不熟悉Js,也能做出有设计感的动态页面
[你的创意带来改变]
实例Demo
苹果官网的手机介绍界面一直是我模仿的方向
apple
一份简单的个人简历
timejs-myInfo
在GitHub仓库中实现了一个网页PPT,可以回放与正放
demoPPT.html在线地址
GitHub地址:https://github.com/royalknight56/timeAxis.js
timeAxis.js--一个简单的时间轴JS框架--仿苹果官网相关推荐
- 用timeline 时间线 和 Collapse 折叠面板做一个简单的时间轴
项目上有个时间轴功能,我看了一下element上有时间轴功能,不过有点太简单,我想改造一下这个时间轴,记录一下,用Timeline 时间线 和 Collapse 折叠面板,两个加起来做了一时间轴,当是 ...
- 一个简单的时间轴demo
一个时间轴的组成 使用一个块级元素包裹内容,并未块级元素设置边框 定义圆形或者菱形等元素标签,子元素设置偏移或者定位元素将图标定位到边框上 使其中的内容不溢出,自动换行,内容自动撑高 英文自动换行:w ...
- idea log 不输出error_还在使用console.log()吗?Bunyan:一个简单易用的JS日志框架
Bunyan是一个简单易用的JS日志框架,可以工作在多种环境下,这里以Nodejs为例说明Bunyan的基本用法.是时候替换console.log的写法了. 安装 npm install --save ...
- CSS实现一个动态横向时间轴
CSS实现一个动态横向时间轴 先看效果 html <template><x-view class="stepFlex"><x-viewv-for=&q ...
- tween.js一个平滑动效果的js动画库
tween.js一个平滑动效果的js动画库 tween.js是什么? tween.js是一款可生成平滑动效果的js动画库,允许以平滑的方式修改元素的属性值. tween.js达到什么效果? 它可以通过 ...
- UNIX网络编程笔记(2):一个简单的时间获取程序
这一讲通过一个简单的时间获取程序简单介绍套接字编程. 1.套接字API 1.1.套接字地址结构 上一讲中介绍了TCP的一些内容,知道了一个套接字对唯一标识了网络中的一个TCP连接,而一个套接字标识了一 ...
- 2020 用html做一个简单的时间显示(12小时制)
用前端html做一个简单的时间显示(12小时制) 如图所示 显示年月日.时间.上下午以及星期几 功能: 1. 此代码解决时间比如秒数 为单数时,在前面补0 //值小于10时,在前面补0 functio ...
- 运用HTML+CSS+JS简单制作苹果官网首页
运用HTML+CSS+JS制作苹果官网首页 上次例会所留任务是用上HTML+CSS+JS做一个网页.内容自定. 我想的是做一个苹果官网首页的网页. 大概是这样的:苹果官网首页 我所做的和它相差不多 不 ...
- html仿苹果桌面导航js css,CSS简单实现弹出框、输入框等的背景幕布,模仿苹果官网导航块的半透明效果。...
需求提要 我们如果想写一个效果类似弹出框的组件,首先简单分析一下弹出框的几个特性:弹出框肯定位于当前页面的最顶端,并且在弹出框关闭之前,其他控件都无法点击.focus等. 为了更好突出弹出框的效果,除 ...
最新文章
- java递归排雷_C语言实现扫雷小游戏
- python进程执行带有参数的任务(args、kwargs)
- 封装、继承、多态、访问符,范围修饰符
- Java 求1000以内的同构数_求1-10000之间的同构数
- 周五话分析 | 方法论难落地?来个量身定制版本吧(AARRR模型)
- JavaScript学习13 JavaScript中的继承
- final 字符常量——确定一个值后该值无法改动,使变量变字符常量
- C++中判断在字符串中是否存在空格 以及 如何输入带空格的字符串
- SpingBoot+Mybaits+Vue,更新学习
- 无法转化为项目财富的技术或功能就是垃圾
- 全能王PDF转换器 V2.0.0.2
- TCP\IP协议实践:wireshark抓包分析之链路层与网络层
- BZOJ3680 吊打XXX
- 极品五笔自定义字库(jpwb.emb)
- 修改配色 Mac电脑默认命令行工具(终端\terminal) MacBook Pro MacBook
- LM2586S 应用笔记
- 用python把图片换成蓝底_Python给照片换底色(蓝底换红底)
- Python写简单的拼图小游戏
- java版怎么安装mod_java – 如何在Mac OS X上安装mod_jk
- 为打印到OneNote中的PDF添加链接目录
热门文章
- dell inspiron 只有一个飞行模式 没有wifi_连上WiFi就能打电话?“手机营业厅”中的神奇功能火了...
- 关于仿写00片刻企业站
- uva 572 Oil Deposits
- Android 实现拍照功能,并将图片保存到本地存储
- Qt-Q_OBJECT宏及控件提升导致的类重定义问题
- Python|报错解决|os.symlink: FileExistsError
- 苹果电脑mysql安装流程_mac系统下安装mysql步骤
- Android初级基础知识复习(十八) —— 自定义通知栏
- 为什么程序员喜欢在半夜写代码?
- 2020美容师(初级)操作证考试及美容师(初级)作业模拟考试