抖音白天与晚上触发不同特效的Graph节点编写

简介: 抖音白天与晚上触发不同特效的Graph节点编写

需求

今天我们要制作一个白天与晚上 (6-18点为白天其余时间为晚上) 拍出来效果不一样的特效。那么我们如何通过graph节点实现这一操作呢?

需求分析

  1. 获取系统时间
  2. 定义时间变量即(几点到几点为白天几点到几点为晚上)
  3. 拿系统时间与定义的时间进行判断如果为白天触发白天特效,否则触发晚上对应的特效

相关代码如下!

Date 当前时间 = new Date;
int time6 = 6;
int time18 = 18;
if(当前时间 >= time6 && 当前时间 <= time18){
  执行白天特效......
}else{
  执行晚上特效......
}

在Graph中实现

上面了解了相关的需求与逻辑,也看过了实现代码,那么在我们抖音平台提供的Graph中如何实现呢?请各位小伙伴紧跟博主的步伐。带领大家逐步操作并完成这一效果。

  1. 获取系统时间节点,这里我们用到的是时间组件的小时属性。


0bee21978dba4e2d98e579f4aba95b97.png

  1. 创建大于等于判断与小于等于判断节点(这里的判断规则是拿数值a与数值b进行判断,结果为true与false)

291bf09e6276430781e8d769974add83.png

  1. 定义判断规则并完成相关链接

97526a9ece134d5e99ad1d7f9fe3ead1.png

  1. 定义并且条件并完成链接,即两个判断条件必须同时满足

d3bb42921dcc41398cb884a2fe036e7a.png

  1. 定义输出节点,输出前面四步操作的值

df181ad48f7a49769e49f89abcdb4623.png

  1. 定义if判断,如果条件成立(true)执行哪些操作,如果不成立(false)执行哪些操作。

e5c2af36c9c74793a13e4dc050532cf5.png

  1. 导入一个具体要执行的操作,默认让贴纸为关闭状态

142b49168f2f4c72aa297ba2f15a87a8.png


a6b6103920f34cc59e06bfe23318fd2b.png


16b1b3f91065455fa77c4b609c0950f6.png

  1. set其启动方法并完成触发链接

f4c93b9877fd4eb4addd127a87142966.png

9bb83a00ea764f0c8b09d34b48254b48.png

  1. 添加触发条件并链接

69aeb8a909884f7e9555d13ec29ccbcd.png

测试

经过编写graph节点,我们的贴纸在6-18点之间点击屏幕会触发其余时间不会触发。那么下面我们来进行相关的测试。

当前系统时间为

55dd7318b48e4853a0539708de044de1.png


我们点击屏幕


80201119fd364078af4bff8aaafe33bf.png

爱心成功出现了!好了本期的效果就到此结束了,大家可以拿去制作有趣的特效了!


附一张成品链接图在末尾!

503bb1003ca44109beea6e31b4f8d9cf.png



相关文章
|
移动开发 算法 JavaScript
平滑切换——PPT动画的全新玩法(原理篇)/04/O365智能系列(一)
平滑切换——PPT动画的全新玩法(原理篇)/04/O365智能系列(一)
2579 1
平滑切换——PPT动画的全新玩法(原理篇)/04/O365智能系列(一)
|
3月前
|
前端开发
一键复制:期末大作业常用的CSS动画导航效果!
一键复制:期末大作业常用的CSS动画导航效果!
|
3月前
|
JSON JavaScript 前端开发
震惊!JS如何悄无声息追踪你的每一步?揭秘页面访问与关闭的超级上报大法,让数据说话,优化体验不再难!
【8月更文挑战第4天】在Web开发中,跟踪用户行为对提升体验与留存至关重要。本文以在线学习平台为例,介绍如何用JavaScript监听页面访问及关闭,并上报数据。通过`window.onload`监测页面加载,记录用户访问;利用`navigator.sendBeacon`在用户离开时发送少量数据至服务器,无需担心请求失败。需注意隐私合规、性能影响及浏览器兼容性。此技术有助于深入理解用户行为,为产品迭代提供依据。
131 8
|
6月前
|
人工智能 算法 计算机视觉
我的自描外挂制作日志——FPS类游戏的自瞄【构思准备】
我的自描外挂制作日志——FPS类游戏的自瞄【构思准备】
235 0
|
5月前
|
小程序 API
技术心得记录:微信小程序之图片频繁变化,几秒之后输出结果(适用于抽奖)
技术心得记录:微信小程序之图片频繁变化,几秒之后输出结果(适用于抽奖)
27 0
|
6月前
|
前端开发 移动开发 JavaScript
跨年动态炫酷烟花网页代码
利用Html5的Canvas技术,模拟出逼真的烟花效果,让用户在网页上欣赏到绚丽多彩的烟花盛宴。同时,通过交互式设计,让用户能够与烟花互动,增加趣味性。
73 0
跨年动态炫酷烟花网页代码
|
小程序 JavaScript
微信小程序仿微信运动步数排行-交互
微信小程序仿微信运动步数排行-交互
50 0
|
存储
SwiftUI动画进阶,仿购票平台App行程目的地互换动效
SwiftUI动画进阶,仿购票平台App行程目的地互换动效
89 0
|
前端开发 JavaScript
第30/90步《前端篇》第7章 重构背景音乐、小球和挡板 第21课
今天学习《前端篇》第7章 重构背景音乐、小球和挡板 第21课 创建挡板模块,这节课尝试将挡板模板化。游戏中共有两块挡板(左挡板与右挡板),两块挡板的行为不同,一块由系统控制自动移动,一块由玩家控制,但它们的渲染逻辑是致的。
56 0
|
前端开发 测试技术
第29/90步《前端篇》第7章 重构背景音乐、小球和挡板 第20课
今天学习《前端篇》第7章 重构背景音乐、小球和挡板 第20课 创建小球模块,这节课我们将小球对象模块化。
79 0