CocosCreator之节点悬浮效果组件

莫找借口失败，只找理由成功。

效果描述：就是一个节点在哪儿飘啊飘的。动画组件也能实现。

组件：FloatMove.ts

const { ccclass, property, executeInEditMode, playOnFocus } = cc._decorator;
/*** 悬浮效果* @author 神兽白泽*/
@ccclass
@executeInEditMode()
@playOnFocus()
export default class FloatMove extends cc.Component {@property({ displayName: '悬浮距离' }) private value: number = 15;@property({ displayName: '消耗时间', tooltip: '悬浮1/4距离消耗的时间' }) private time: number = 1;/** 编辑器预览 */private _edit_play: boolean = false;@property({ displayName: '编辑器预览' })get edit_play(): boolean {if (this._edit_play && !this.edit_playing) this.initShakeSlow();this.edit_playing = this._edit_play;return this._edit_play;}set edit_play(v: boolean) {this._edit_play = v;if (!v) this.stop();}/** 编辑器是否正在播放 */private edit_playing = false;onLoad() {}start() {if (CC_EDITOR) {if (this.edit_play) {this.initShakeSlow()}} else {this.initShakeSlow()}}/*** 缓动* @param node 动画节点*/private initShakeSlow() {let node = this.node;let rotate1 = cc.tween().to(this.time, { position: { value: new cc.Vec2(0, this.value), easing: 'sineOut' } })let rotate2 = cc.tween().to(this.time, { position: { value: new cc.Vec2(0, 0), easing: 'sineIn' } })let rotate3 = cc.tween().to(this.time, { position: { value: new cc.Vec2(0, -this.value), easing: 'sineOut' } })let rotate4 = cc.tween().to(this.time, { position: { value: new cc.Vec2(0, 0), easing: 'sineIn' } })let sequence1 = cc.tween().sequence(rotate1, rotate2, rotate3, rotate4)cc.tween(node).then(sequence1).repeatForever().start();}/** 停止动画 */private stop() {this.node.stopAllActions();}}

整理不易，关注收藏不迷路。

目录：CocosCreator经典笔记_神兽白泽-CSDN博客

笔者qq、微信：1302109196

qq群：415468592

CocosCreator之节点悬浮效果组件相关推荐

React Native悬浮效果组件
由于其他的原因,对于React Native相关的内容最近没有投入太多的关注,从去年年底出版了<React Native移动开发实战>后,对于React Native的关注就比较少了.最近 ...
uniapp使用悬浮窗组件添加点击事件的处理方法以及拖拽出界的问题
小程序/H5悬浮窗组件基本介绍当我们开发小程序或这app端的时候,有时候会遇到悬浮窗的需求.如果用原生Js写会异常的复杂,所以使用那些大佬们已经开发好的组件会使开发变得异常的简洁. 我刚来亚信实习 ...
React 入门：实战案例 TodoList Item鼠标悬浮效果
文章目录目标实现效果实现思路实现步骤第一步:Item 组件中定义一个 `mouse` 的 state 属性第二步:定义悬浮事件回调第三步:绑定事件处理,及悬浮样式控制完整代码 Item ...
如果去掉UITableView上的section的headerView和footerView的悬浮效果
项目需要cell的间距,又不需要悬浮效果,百度之后找到这个方法,记录一下,备忘. 用UIScrollView的代理方法实现 - (void)scrollViewDidScroll:(UIScrollV ...
[译] CSS 变量实现炫酷鼠标悬浮效果
原文: Stunning hover effects with CSS variables 我的博客:[译] CSS 变量实现炫酷鼠标悬浮效果我最近从Grover网站上的有趣的悬停动画中获得灵感.将 ...
2011年最新使用CSS3实现各种独特悬浮效果的教程
日期:2011/11/03 来源:tympanus 编译:GBin1.com CSS3的功能非常强大,这个毋庸置疑.在这篇教程中我们将使用一些独特的方式来实现一些特效.我们使用CSS3的trans ...
html 悬浮阴影,css实现悬浮效果的阴影的方法示例
本文介绍了css实现悬浮效果的阴影的方法示例,分享给大家,具体如下: 要实现的效果图: 实现的代码: -webkit-box-shadow:0px 3px 3px #c8c8c8 ; -moz-box ...
html 浮动窗口置顶,jQuery简单实现页面元素置顶时悬浮效果示例
本文实例讲述了jQuery简单实现页面元素置顶时悬浮效果的方法.分享给大家供大家参考,具体如下: 一.JS Code: $.fn.smartFloat = function () { var posi ...
vue伸缩效果_Vue.js - 元素展开、收起动画效果组件（附：二级菜单的展开、收缩动画效果）...
子菜单的展开.收缩功能在许多系统上都很常见,如果想要在打开收起时带有动画效果,过去常常会通过 jQuery 实现.而在 Vue 项目中,我们可以单独封装一个动画组件,方便使用. 1,效果图点击一级菜 ...

CocosCreator之节点悬浮效果组件

CocosCreator之节点悬浮效果组件相关推荐

最新文章

热门文章