Bolt 动画
引擎内置的 种动画
--PosChangeAnimation 平移
local ani = XLGetObject("Xunlei.UIEngine.AnimationFactory"):CreateAnimation("PosChangeAnimation")
ani:BindObj(imageObj)
ani:SetTotalTime()
ani:SetLoop(true)
ani:SetKeyFramePos(,,,)
imageObj:GetOwner():AddAnimation(ani)
ani:Resume() --AngleChangeAnimation 旋转
local ani = XLGetObject("Xunlei.UIEngine.AnimationFactory"):CreateAnimation("AngleChangeAnimation")
ani:BindObj(imageObj)
ani:SetKeyFrameAngle(,,,,,)
ani:SetTotalTime()
ani:SetLoop(true)
ani:SetBlendMode("AntiAlias")
imageObj:GetOwner():AddAnimation(ani)
ani:Resume() --AlphaChangeAnimation 透明度
local ani = XLGetObject("Xunlei.UIEngine.AnimationFactory"):CreateAnimation("AlphaChangeAnimation")
ani:BindRenderObj(imageObj)
ani:SetTotalTime()
ani:SetKeyFrameAlpha(,)
imageObj:GetOwner():AddAnimation(ani)
ani:Resume() --SeqFrameAnimation 序列帧
local ani = XLGetObject("Xunlei.UIEngine.AnimationFactory"):CreateAnimation("SeqFrameAnimation")
ani:BindImageObj(imageObj)
ani:SetTotalTime()
ani:SetLoop(true)
ani:SetResID("ImageSeq.BoltTest.SeqAni")
imageObj:GetOwner():AddAnimation(ani)
ani:Resume() --TurnObjectAnimation 对象1旋转到对象2
local imageObj2 = ctrlObj:GetControlObject("TestAni2.Texture")
local ani = XLGetObject("Xunlei.UIEngine.AnimationFactory"):CreateAnimation("TurnObjectAnimation")
ani:BindRenderObj(imageObj1,imageObj2)
ani:SetFlag("RoundY")
ani:SetTotalTime("")
imageObj1:GetOwner():AddAnimation(ani)
ani:Resume() --MaskChangeAnimation MaskObject 位置改变
local maskObj = ctrlObj:GetControlObject("MaskAni.Mask")
local uiObject = ctrlObj:GetControlObject("MaskAniBkg.Texture")
local ani = XLGetObject("Xunlei.UIEngine.AnimationFactory"):CreateAnimation("MaskChangeAnimation")
ani:BindMaskObj(maskObj)
ani:SetMaskKeyFrame(,,,,,-,,)
ani:SetLoop(true)
ani:SetTotalTime()
maskObj:GetOwner():AddAnimation(ani)
ani:Resume() MaskObject 的使用方法参考相关文档;
注意这里只调用了 BindMaskObj 而没有调用 BindTargetObj ,不知道为啥调用了 BindTargetObj 之后动画并不会被执行
注意:不知道为啥旋转动画不能在OnInitControl里面直接使用,需要用AsynCall调用才行:
function OnInitControl(ctrlObj)
local imageObj = ctrlObj:GetControlObject("TestAni.Image") AsynCall(function() -- 异步调用
-- AngleChangeAnimation 旋转
local rotateAni = XLGetObject("Xunlei.UIEngine.AnimationFactory"):CreateAnimation("AngleChangeAnimation")
rotateAni:BindObj(imageObj)
rotateAni:SetKeyFrameAngle(,,,,,)
rotateAni:SetTotalTime()
rotateAni:SetLoop(false)
rotateAni:SetBlendMode("AntiAlias")
imageObj:GetOwner():AddAnimation(rotateAni)
rotateAni:Resume()
end)
end 自定义动画:
在 xml 文件里定义动画模版:
<animation_def class="BoltTest.ani">
<method_def>
<Action file="MainWnd.xml.lua" func="BoltTestAni_Action"/>
<BindObj file="MainWnd.xml.lua" func="BoltTestAni_BindObj"/>
<GetBindObj file="MainWnd.xml.lua" func="BoltTestAni_GetBindObj" />
</method_def>
</animation_def> 在 lua 文件里使用动画:
function BoltTestAni_Action(aniSelf)
local attr = aniSelf:GetAttribute()
local bindObj = attr.BindObj
if bindObj == nil then
return
end local totalTime = aniSelf:GetTotalTime()
local runningTime = aniSelf:GetRuningTime() --[[ 按时间缩小
local progress = (totalTime - runningTime) / totalTime
if progress < 0 then
progress = 0
end
local l,t,r,b = bindObj:GetObjPos()
bindObj:SetObjPos(l,t,r,t+(b-t)*progress)
--]] -- 按指定间隔切换图片
local frameTime =
local progress = runningTime / frameTime +
if progress > then
progress =
elseif progress < then
progress =
end
progress = math.floor(progress)
bindObj:SetResID("Bitmap.BoltTest.SeqAni"..progress)
end
function BoltTestAni_BindObj(aniSelf, obj)
local attr = aniSelf:GetAttribute()
attr.BindObj = obj
end
function BoltTestAni_GetBindObj(aniSelf)
local attr = aniSelf:GetAttribute()
return attr.BindObj
end 注意:XLUE 每隔 / 秒刷新一次界面,每次刷新时改变对象的状态,这是自定义动画的基本原理;
Action 方法每隔 / 秒调用一次;
BindObj 方法里通过 attr 表来保存要渲染的对象;
GetRuningTime 方法获取动画的运行时间,因为是每隔 / 秒调用一次 Action 方法,所以 GetRuningTime 也是每隔 / 递增 动画的状态改变事件:
-- state: 0 动画未绑定对象;1 动画准备就绪;2 动画正在执行;3 动画暂停; 4 动画结束
ani:AttachListener(true, function(aniSelf, oldState, newState)
-- TODO
end)
注意这里,如果设定动画 SetLoop(true) state 将在 和 之间转换;
对一个动画进行 Stop,state 变为 而不是 ;也就是动画结束而不是动画暂停;
对一个动画进行 Stop,再调用 resume 并不能够使暂停的动画重新开始;
对一个动画进行 Stop,该动画实例即失效,需要重新创建该动画才能使动画重新运行 同时执行多个动画:
将多个动画对象绑定到同一个 UIObject 上即可:
-- PosChangeAnimation 平移
local ani = XLGetObject("Xunlei.UIEngine.AnimationFactory"):CreateAnimation("PosChangeAnimation")
ani:BindObj(imageObj)
ani:SetTotalTime()
ani:SetLoop(false)
ani:SetKeyFramePos(,,,)
imageObj:GetOwner():AddAnimation(ani)
ani:Resume() --SeqFrameAnimation 序列帧
local ani = XLGetObject("Xunlei.UIEngine.AnimationFactory"):CreateAnimation("SeqFrameAnimation")
ani:BindImageObj(imageObj)
ani:SetTotalTime()
ani:SetLoop(true)
ani:SetResID("ImageSeq.BoltTest.SeqAni")
imageObj:GetOwner():AddAnimation(ani)
ani:Resume()
注意这里,不知道为啥 AngleChangeAnimation 旋转动画跟 SeqFrameAnimation 序列帧动画不能一起用; 执行动画序列:
local function StartAnimSequence(onFinish, ...)
local function StartAnim(aniIndex)
if arg[aniIndex] == nil then
onFinish()
return
end
arg[aniIndex]:AttachListener(true, function(aniSelf, oldState, newState)
if newState == then
StartAnim(aniIndex + )
end
end)
arg[aniIndex]:Resume()
end
StartAnim()
end
StartAnimSequence(function() return end, posAni, rotateAni)
尝试用这种方法封装一个执行动画序列的方法;发现不行,不知道为啥; 动画曲线:
在资源 xml 里定义 curve 资源,可使用 CurveTool 工具来定义:
<curve id="Curve.BoltTest.MyAni" type="bspline">
<controlpoint tp="0.000000" sp="0.000000"/>
<controlpoint tp="0.854396" sp="0.025281"/>
<controlpoint tp="0.859890" sp="0.977528"/>
<controlpoint tp="0.997253" sp="1.000000"/>
</curve>
在自定义动画里通过 Curve:GetProgress(tp) 传入一个时间,获取对应的进度:
local curve = aniSelf:GetCurve()
local tp = runningTime / totalTime
local progress = curve:GetProgress(tp)
利用这个 progress 来设定进度即可
Bolt 动画的更多相关文章
- 动画requestAnimationFrame
前言 在研究canvas的2D pixi.js库的时候,其动画的刷新都用requestAnimationFrame替代了setTimeout 或 setInterval 但是jQuery中还是采用了s ...
- 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- CSS 3学习——animation动画
以下内容根据官方文档翻译以及自己的理解整理. 1. 介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...
- javascript动画系列第三篇——碰撞检测
前面的话 前面分别介绍了拖拽模拟和磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题.本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多, ...
- 虾扯蛋:Android View动画 Animation不完全解析
本文结合一些周知的概念和源码片段,对View动画的工作原理进行挖掘和分析.以下不是对源码一丝不苟的分析过程,只是以搞清楚Animation的执行过程.如何被周期性调用为目标粗略分析下相关方法的执行细节 ...
- Visaul Studio 常用快捷键的动画演示
从本篇文章开始,我将会陆续介绍提高 VS 开发效率的文章,欢迎大家补充~ 在进行代码开发的时候,我们往往会频繁的使用键盘.鼠标进行协作,但是切换使用两种工具会影响到我们的开发速度,如果所有的操作都可以 ...
- transtion:过渡动画
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #4f5d66 } p.p2 { margin: 0.0px 0 ...
- 再谈CAAnimation动画
CAAnimaton动画分为CABasicAnimation & CAKeyframeAnimation CABasicAnimation动画, 顾名思义就是最基本的动画, 老规矩先上代码: ...
- jQuery动画-圣诞节礼物
▓▓▓▓▓▓ 大致介绍 下午看到了一个送圣诞礼物的小动画,正好要快到圣诞节了,就动手模仿并改进了一些小问题 原地址:花式轮播----圣诞礼物传送 思路:动画中一共有五个礼物,他们平均分布在屏幕中,设置 ...
随机推荐
- Qt在VS2010的安装与配置
1. 下载Qt的安装包和VS2010的Qt插件 2. 安装Qt SDK 点击下载安装包,一路回车即可,主要注意Qt的安装路径最好安装在全英文路径而且中间没有空格, 安装好后,可以运行开始菜单里面的Qt ...
- 【转】Web标准中的常见问题
本文转自http://www.tracefact.net/Misc/Common-Problems-Of-Web-Standard.aspx 引言 大概在2004年的时候,Web标准的概念藉由一本名为 ...
- 1097. Deduplication on a Linked List (25)
Given a singly linked list L with integer keys, you are supposed to remove the nodes with duplicated ...
- cadence 16.6 Pspice 仿真步骤
从ADI官网下载后缀为 cir 的文件,AD8210 为例 进行仿真 1 打开 Cadence -> Release 16.6 -> PSpice Accessories -> Mo ...
- MySQL主从同步报Client requested master to start replication from position
数据库版本:5.6.16 测试环境MySQL 主从,数据库被人重启,忘记开启start slave,导致主从失效,停了一天的数据没有追上. 查看从库的数据库状态:show slave stat ...
- windows2003通过iis配置ftp服务器
以前习惯于用filezilla作为windows的ftp服务器,但是现在新版本的filezilla已经不支持windows2003了,所以趁机试一下iis配置ftp服务器. 前面都是很常规的配置 参考 ...
- Enum(枚举)示例
package main; public class EnumTest { /** * 普通枚举 */ public enum ColorEnum { red, g ...
- cocos2dx中的背景图层CCLayerColor和渐变图层CCLayerGradient
1.CCLayerColor是专门用来处理背景颜色的图层,它继承自CCLayer,可以用来设置图层的背景颜色,因为CCLayer默认是透明色的,即无颜色的 2.CCLayerGradient是用来显示 ...
- Week1 Team Homework #1: Study the projects done by previous student groups
我们研究了学长的项目:百度3D地图API的调用.下面是我们对该项目的一些看法: 优点: 界面清晰 各类之间调用及其他关系容易理清. 缺点: 前段html代码过于冗杂,很多(div)块间的层次关系不 ...
- Careercup - Facebook面试题 - 5761467236220928
2014-05-02 07:06 题目链接 原题: Given an array of randomly sorted integers and an integer k, write a funct ...