Cocos开发笔记——Tween动画

最新推荐文章于 2024-05-07 20:04:31 发布
原创 最新推荐文章于 2024-05-07 20:04:31 发布 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了tween动画的使用方法，包括to和by的区别。to用于设置属性的绝对值改变，而by则是相对当前值进行更改。还展示了如何添加弹性弹跳效果的示例，通过easing属性预设动画效果。了解这些概念，可以更好地在项目中实现动态和流畅的视觉过渡。

tween动画怎么用

用法示例:

	cc.tween(this.node)
	.to(time,{
   
   property:value})

to和by的区别

to 对属性的值,绝对性的更改 例如 a = 100,将值改为固定值
by 对属性的值,相对性更改 例如 a+=100,以当前值为基础,对值进行更改

使用easing

easing里面有已经预设好的一部分动画效果

用法示例:


                

                
                
        

    



  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
【Cocos】用cc.tween实现色彩渐变效果

				
			

			

				

					Dust的博客
				

				

					02-20
					
					1240
					
				

			

		

		

			
				
经常写Bug的都知道，cc.Color中有一个值，如果我们想要一个图片从一个颜色渐变到另一个颜色，去tween这个Color中的值，会发现颜色闪烁，并不能实现渐变效果。正确的做法是同时改变rgb的值，才能实现颜色柔和地渐变。

			
		

	



                

            
              



	

		

			

				
					
Cocos Tween

					
最新发布

				
			

			

				

					末零 的博客
				

				

					11-26
					
					1446
					
				

			

		

		

			
				
Cocos Tween呢，作为一个类，其本质是一个Action的Creater和Controler，对于一个Tween，我们可以告诉它要做什么Action或者说Action组合（串行、并行），并由Tween控制Action的启停等。

			
		

	



              


  
              

                


	

		

			

				
					
CocosCreator之Tween缓动动画

				
			

			

				

					神兽白泽
				

				

					10-04
					
					9388
					
				

			

		

		

			
				
可能遇到的问题：

1.按钮相关的bug->按钮设置了缩放效果后，会与动作的scale的效果冲突，此时需要先禁用按钮，动画完成后再启用按钮。

2.重复次数填1，则1此都不循环，填2则循环1次。

3.repeat操作是对上个操作循环，而不是对前面所有的操作repeat，如果操作多请用cc.sequence包裹住这些操作后，再使用循环。

tween的基本操作：


let tween = cc.tween;
// 链式结构
tween(this.node)
    .to(1, { position

			
		

	





	

		

			

				
					
cocos2d-X 节点（CCTween.h）API

				
			

			

				

					runaying的专栏
				

				

					11-25
					
					2304
					
				

			

		

		

			
				
本文来自http://blog.youkuaiyun.com/runaying ，引用必须注明出处！


cocos2d-X 节点（CCSpriteFrameCache.h）API

温馨提醒：为了大家能更好学习，强烈推荐大家看看本人的这篇博客 Cocos2d-X权威指南笔记

			
		

	



		

			
		



	

		

			

				
					
cocoscreator中tween详细用法

				
			

			

				

					Cleve_baby的博客
				

				

					07-06
					
					1万+
					
				

			

		

		

			
				
基本方法：to：对属性进行绝对值计算，最终的运行结果即是设置的属性值，即改变到某个值by：对属性进行相对值计算，最终的运行结果是设置的属性值加上开始运行时节点的属性值，即变化值 



贝塞尔曲线：   



· 支持缓动任意对象的任意属性



· 变速 easing



· 自定义 progress// 对所有属性自定义 progress


// 对单个属性自定义 progress



· 插入其他的缓动到队列中


· 并行执行缓动​​​​​​​


· 回调​​​​​​​


· 重复执行


			
		

	





	

		

			

				
					
Cocos开发笔记——事件（EventTarget）

				
			

			

				

					Liu_ChangC的博客
				

				

					11-30
					
					1996
					
				

			

		

		

			
				
监听
let eventManager = new cc.EventTarget();
eventManager.on("eventTag", this.listenClient,this)

listenClient(){
	//	回调
}

触发
let eventManager = new cc.EventTarget();
eventManager.emit("eventTag",{info:this.info})




			
		

	





	

		

			

				
					
Cocos2dx——帧动画（火焰）

				
			

			

				

					04-12
				

			

		

		

			
				
在Cocos2dx游戏开发框架中，帧动画是一种常见的技术，用于实现动态视觉效果，如火焰、水流、角色动作等。本教程将深入探讨如何利用Cocos2dx创建火焰效果，涉及图片序列处理和代码实现。  一、帧动画原理 帧动画是...

			
		

	





	

		

			

				
					
Cocos开发笔记——数组（Array）

				
			

			

				

					Liu_ChangC的博客
				

				

					11-24
					
					4063
					
				

			

		

		

			
				
声明一个数组
arr = [] 

为数组添加元素
arr.push("可以是任意数据类型")
arr.push("同一个数组可以添加不同的数据类型")

arr.unshift("在数组开头插入元素")

删除数组中的元素
**删除数组最后一位元素，并返回这个元素**
arr.pop()
**删除数组第一位元素，并返回这个元素**
arr.shift()
**删除指定索引位置及后续长度的所有元素，还可以插入一个或多个新元素**
arr.splice(index , length , newItem...)

			
		

	





	

		

			

          精选资源
				
					
Cocos2d-x学习笔记——完全掌握C++ API与游戏项目开发.zip

				
			

			

				

					06-28
				

			

		

		

			
				
本学习笔记旨在帮助开发者全面掌握Cocos2d-x的C++ API以及游戏项目的开发流程。  一、Cocos2d-x框架基础 Cocos2d-x是Cocos2d-x系列的C++版本，它提供了丰富的图形绘制、动画制作、音频播放、物理引擎等功能。Cocos2d...

			
		

	





	

		

			

				
					
cocos学习笔记  cc.tween

				
			

			

				

					liulei21的专栏
				

				

					09-27
					
					1373
					
				

			

		

		

			
				
cocos中的缓动系统 cc.tween

 特点：支持以链式结构的方式创建一个动画序列

      不在局限于节点上的属性

 两种设置方式

      1、to改变到某个值

       2、by变化值

cc.tween 在调用 start 时会将之前生成的 action 队列重新组合生成一个 cc.sequence 队列，依次执行。



cc.tween(this.node)
//to,在第一秒的时候放大为2倍，位置为(100,100),角...

			
		

	





	

		

			

				
					
cocos creator新缓动系统-cc.tween

					
热门推荐

				
			

			

				

					JoeyHuangzx的专栏
				

				

					01-03
					
					1万+
					
				

			

		

		

			
				
前言
一直对于cocos creator的action系统有着深深的埋怨，原因是用起来太麻烦了。习惯了Unity的Tween插件的用法，我也试着自己封装了下action系统，用起来像Tween那样，具体参照Cocos Creator 游戏开发之action缓动系统的封装，看到cocos creator 2.0.9版本的之后推出了tween，心中那是无比的欢乐啊。
关于Tween
Tween 提供了一个简单灵活的方法来创建 action。相对于 Cocos 传统的 cc.Action，cc.Tween 在创建

			
		

	





	

		

			

				
					
cocoscreator数字增长动画

				
			

			

				

					没有了糖的可乐
				

				

					03-11
					
					3524
					
				

			

		

		

			
				
cocoscreator缓动动画写法：
updatenNumberAnim: function (curNum) {
    var obj = {};
    obj.num = originNum;
    this.lbNumber.string = obj.num;
    cc.tween(obj).to(1, {num:curNum}, {progress:(start, end, c...

			
		

	





	

		

			

				
					
cocos2d-x节点（CCActionTween.h)API

				
			

			

				

					runaying的专栏
				

				

					12-08
					
					2648
					
				

			

		

		

			
				
本文来自http://blog.youkuaiyun.com/runaying ，引用必须注明出处！

cocos2d-x节点（CCActionTween.h)API
温馨提醒：为了大家能更好学习，强烈推荐大家看看本人的这篇博客 Cocos2d-X权威指南笔记


//补间动画
///cocos2d-x-3.0alpha0/cocos2dx/actions

#ifndef __CCACTION

			
		

	





	

		

			

				
					
cocos 浮动动画，重复执行动画，重复执行多个动作的动画

				
			

			

				

					PrimaryColor
				

				

					05-07
					
					1146
					
				

			

		

		

			
				
/ 让这个 Tween 无限重复。

			
		

	





	

		

			

				
					
Tween动画实现过程

				
			

			

				

					becauseof_11的博客
				

				

					06-14
					
					748
					
				

			

		

		

			
				
动画制作注意事项：

1）必须是在同一个界面上，比如同一个group里面

2）一个完整的动画是由多个动画组成的，需要分解成多个部分
一个完整的动画制作过程如下：

1）创建需要做动画的对象

2）获取动画对象的x，y位置

3）将获取到的位置设成全局的位置，即所在的group位置

4）将group的位置转换成正确的动画对象坐标

5）获取动画终点的全局位置，和上述

			
		

	





	

		

			

				
					
cocos cc.tween call()函数不执行原因剖析

				
			

			

				

					daihaibo1989的博客
				

				

					04-18
					
					775
					
				

			

		

		

			
				
cocos cc.tween call()函数不执行原因剖析

			
		

	





	

		

			

				
					
彻底搞懂Cocos Creator Tween

				
			

			

				

					Unity_RAIN的博客
				

				

					11-24
					
					763
					
				

			

		

		

			
				
打开cocos引擎源码actions/tween.js, 你会发现Tween其实是基于Cocos 的Action系统来实现的, Tween容器对象里面放的是一个一个的TweenAction, 这样Tween实际上是Action系统来实现的。Cocos Creator 里面的Tween你可以理解为是一个容器对象, 在这个容器对象里面可以存放很多的”执行过程”，当执行这个Tween的时候，会一个一个过程的触发执行。(3): 执行Tween对象，引擎会一个一个的执行之前添加进来的过程。

			
		

	





	

		

			

				
					
深入解析游戏开发中Tween动画的实现方法

				
			

			

				

					
				

			

		

		

			
				
在游戏开发中，动画的实现是一个非常关键的部分，而其中Tween动画的实现更是许多开发者关注的重点之一。...对于希望深入了解游戏动画机制、提升动画开发能力的开发者而言，具有极高的学习与参考价值。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
贪小心

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值