App

Rive

大脸猫专注

Brief

大脸猫专注,一款简单高效的番茄计时器。从设计、交互、动画、代码都由自己独立完成。


动画部分由 Rive 制作。作品集里也简单描述了动画设计的思路到落地到项目的过程。


APP 计划在2024年5月上线Apple Store,敬请期待!

App

Rive

大脸猫专注

Brief

大脸猫专注,一款简单高效的番茄计时器。从设计、交互、动画、代码都由自己独立完成。


动画部分由 Rive 制作。作品集里也简单描述了动画设计的思路到落地到项目的过程。


APP 计划在2024年5月上线Apple Store,敬请期待!

App

Rive

大脸猫专注

Brief

大脸猫专注,一款简单高效的番茄计时器。从设计、交互、动画、代码都由自己独立完成。


动画部分由 Rive 制作。作品集里也简单描述了动画设计的思路到落地到项目的过程。


APP 计划在2024年5月上线Apple Store,敬请期待!

大脸猫专注

一款简单可爱的番茄计时器

大脸猫专注

一款简单可爱的番茄计时器

大脸猫专注

一款简单可爱的番茄计时器

UIKIT.

Color

Brand

# 0E0E0E

Gray

# 8E8E93

Gray3

# C7C7CC

Gray5

# 0E0E0E

Gray2

# AEAEB2

Gray4

# D1D1D6

Gray6

# 0E0E0E

Font

Multilingual

多语言

中文 /

优设字由棒棒体

优设字由棒棒体

英文、日文、韩文 /

SF Rounded

SF Rounded

こちらは日本語です

이것은 한국어입니다

Icon

UIKIT.

Color

Brand

# 0E0E0E

Gray

# 8E8E93

Gray3

# C7C7CC

Gray5

# 0E0E0E

Gray2

# AEAEB2

Gray4

# D1D1D6

Gray6

# 0E0E0E

Font

Multilingual

多语言

中文 /

优设字由棒棒体

优设字由棒棒体

英文、日文、韩文 /

SF Rounded

SF Rounded

こちらは日本語です

이것은 한국어입니다

Icon

UIKIT.

Color

Brand

# 0E0E0E

Gray

# 8E8E93

Gray3

# C7C7CC

Gray5

# 0E0E0E

Gray2

# AEAEB2

Gray4

# D1D1D6

Gray6

# 0E0E0E

Font

Multilingual

多语言

中文 /

优设字由棒棒体

优设字由棒棒体

英文、日文、韩文 /

SF Rounded

SF Rounded

こちらは日本語です

이것은 한국어입니다

Icon

不做咸鱼

从现在开始

"Don’t be a slacker from now on."

休息一会

撸撸猫

When you're tired, pet the cat.

喵~~

Meow~~

猫舍

Cat home

Super 会员计划.

Super

会员计划.

Membership Program

Animation

Rive 动画

Rive

Rive 是一款可在其设计并制作动画的软件。利用强大的状态机来构建不同动画。Rive 提供运行开源库,允许跨各种平台和框架实时播放和控制动画

State Machine

Rive 的状态机提供了一种方法来组合一组动画并通过一系列可以编程控制的输入来管理它们之间的转换。

案例:CatSkin

案例:PomodorCount

SwiftUI.

SwiftUI

SwiftUI 是苹果2019年 WWDC 推出的新 UI 开发框架,主要特点是声明式语法,数据绑定,响应式编程等。

下面展示在 Xcode 使用 Rive 将动画落地到自己的项目中。

Rive Runtimes

下载依赖包 Rive RunTimes : Rive 运行库, 导入 .riv 文件,添加实例。

Think

如何使用一套代码分别控制不同皮肤的动画?例如 CatSkin 会有多套皮肤。

我们可以将案例中 Cat1 和 Cat 2 的 input 在设计中使用相同的值,即 "isSleeping"、"eatingFish"、"isPlaying"

在代码中调用这些值即可一套代码控制多个不同画板中的动画

构建 CatSkinViewModel 数据模型

CatSkinViewModel 遵循 ObservableObject 协议, 以便其他页面订阅该数据模型。

初始化 & 创建实例

实例 Catskin: catSkin: RiveViewModel(fileName: "catskin", artboardName: "Cat1"),

声明一个动作数组 actions

数组actions ,每组包含了:图标 image 、触发值 trigger

触发值 trigger 就是 Rive 中设定好的 input(trigger) 值,即 "isSleeping"、"eatingFish"、"isPlaying"

声明动作函数 trigger

订阅 CatSkinViewModel

通过 @EnvironmentObject var catSkinViewModel: CatSkinViewModel 订阅数据模型 。

studies

studies

studies

studies