-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
ronghui.zrh
committed
Mar 8, 2022
1 parent
9ed0d3d
commit dbf4d1f
Showing
50 changed files
with
4,100 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
*.mode1 | ||
*.mode1v3 | ||
*.mode2v3 | ||
*.perspective | ||
*.perspectivev3 | ||
*.pbxuser | ||
*.xcworkspace | ||
*.framework/ | ||
xcuserdata | ||
examples/iOS/Pods/ | ||
src/iOS/Pods/ | ||
src/Android/build/ | ||
examples/Android/build/ | ||
**/.idea | ||
**/.vscode |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
# 动效曲线 | ||
|
||
> [en-US](./README_en.md) | ||
动效曲线SDK 由一系列的动效曲线函数构成,为了解决开发动效的成本高、效果和设计的预期不一致的问题,每个动效曲线函数可应用于任意一个可动效的属性上,通过改变动效过程中的速率和方向给用户带来更好的体验,目前包括线性曲线、加速曲线、减速曲线、余弦曲线、过度曲线、预期曲线、标准曲线(三次贝塞尔曲线)、弹跳曲线、弹性曲线等,目前支持 iOS 和 Android; | ||
|
||
[语雀知识库地址](https://www.yuque.com/youku-gaia/gaia-motion-curve) | ||
|
||
`iOS`和`Android`均用同一套动效曲线的算法实现,保证双端的动效的一致性,iOS 上层封装使用的是`Core Animation`,Android 则是使用的`插值器`。 | ||
|
||
## iOS | ||
|
||
#### 安装 | ||
|
||
```ruby | ||
pod 'GaiaMotionCurve', '0.1.0' | ||
``` | ||
|
||
#### 头文件 | ||
|
||
```objc | ||
#import <GaiaMotionCurve/CALayer+GaiaMotionCurve.h> | ||
``` | ||
|
||
#### 例子 | ||
|
||
```objc | ||
|
||
#import <GaiaMotionCurve/CALayer+GaiaMotionCurve.h> | ||
|
||
NSMutableArray *animationModels = [[NSMutableArray alloc] init]; | ||
GMCModel *model1 =[GMCModel modelWithKeyPath:@"opacity" | ||
duration:0.2 | ||
delay:0 | ||
curveType:MCXCurveTypeStandard | ||
fromValue:[NSValue gmc_valueWithCGFloat:0] | ||
toValue:[NSValue gmc_valueWithCGFloat:0.9]]; | ||
[animationModels addObject:model1]; | ||
[_tipsImageView.layer gmc_animateWithAnimationModels:animationModels completion:^(BOOL finished) {}]; | ||
|
||
``` | ||
#### [完整iOS Demo 工程](./examples/iOS) | ||
## Android | ||
#### 安装 | ||
引入编译的aar文件 | ||
> 目录:src/Android/build/outputs | ||
#### 包名 | ||
```java | ||
import com.gaia.MotionCurve.*; | ||
``` | ||
|
||
#### 例子 | ||
|
||
```java | ||
|
||
TranslateAnimation animation = new TranslateAnimation(0, displaySize.x - maxTextWidth - 2 * margin, 0, 0); | ||
animation.setFillAfter(true); | ||
animation.setDuration(ANIMATION_DURATION); | ||
animation.setInterpolator(new MotionCurveXStandardInterpolator()); | ||
view.startAnimation(animation); | ||
|
||
``` | ||
|
||
#### [完整Android Demo 工程](./examples/Android) | ||
|
||
## 曲线分类 | ||
|
||
* [线性曲线](./docs/zh-CN/linear.md) | ||
* [加速曲线](./docs/zh-CN/accelerate.md) | ||
* [减速曲线](./docs/zh-CN/decelerate.md) | ||
* [标准曲线](./docs/zh-CN/standard.md) | ||
* [预期曲线](./docs/zh-CN/anticipate.md) | ||
* [过度曲线](./docs/zh-CN/overshoot.md) | ||
* [弹性曲线](./docs/zh-CN/spring.md) | ||
* [弹跳曲线](./docs/zh-CN/bounce.md) | ||
* [余弦曲线](./docs/zh-CN/cosine.md) | ||
|
||
# 行为准则 | ||
|
||
请参考[Alibaba Open Source Code of Conduct](https://github.com/AlibabaDR/community/blob/master/CODE_OF_CONDUCT.md) ([中文版](https://github.com/AlibabaDR/community/blob/master/CODE_OF_CONDUCT_zh.md)). | ||
|
||
|
||
# 开源协议 | ||
|
||
gaia-motion-curve is licensed under the Apache License, Version 2.0. See LICENSE for the full license text. | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
# Motion Curve | ||
|
||
The Motion Curve SDK consists of a series of dynamic curve functions. In order to solve the problems of high cost of developing dynamic effects and inconsistent effects and design expectations, each dynamic curve function can be applied to any dynamic attribute. Bring a better experience to users by changing the speed and direction in the animation process, currently including linear curve, acceleration curve, deceleration curve, cosine curve, transition curve, expected curve, standard curve (cubic Bezier curve), bounce Curves, elastic curves, etc., currently support iOS and Android; | ||
|
||
[YuQue](https://www.yuque.com/youku-gaia/gaia-motion-curve) | ||
|
||
Both `iOS` and `Android` are implemented with the same set of motion curve algorithms to ensure the consistency of motion effects at both ends. The upper layer package of iOS uses `Core Animation`, and Android uses `Interpolator`. | ||
|
||
## iOS | ||
|
||
#### Install | ||
|
||
```ruby | ||
pod 'GaiaMotionCurve', '0.1.0' | ||
``` | ||
|
||
#### Header | ||
|
||
```objc | ||
#import <GaiaMotionCurve/CALayer+GaiaMotionCurve.h> | ||
``` | ||
|
||
#### Example | ||
|
||
```objc | ||
#import <GaiaMotionCurve/CALayer+GaiaMotionCurve.h> | ||
|
||
NSMutableArray *animationModels = [[NSMutableArray alloc] init]; | ||
GMCModel *model1 =[GMCModel modelWithKeyPath:@"opacity" | ||
duration:0.2 | ||
delay:0 | ||
curveType:MCXCurveTypeStandard | ||
fromValue:[NSValue gmc_valueWithCGFloat:0] | ||
toValue:[NSValue gmc_valueWithCGFloat:0.9]]; | ||
[animationModels addObject:model1]; | ||
[_tipsImageView.layer gmc_animateWithAnimationModels:animationModels completion:^(BOOL finished) {}]; | ||
|
||
``` | ||
#### [Full iOS Demo Project](./examples/iOS) | ||
## Android | ||
#### Install | ||
import compiled aar file | ||
> Directory:src/Android/build/outputs | ||
#### Package | ||
```java | ||
import com.gaia.MotionCurve.*; | ||
``` | ||
|
||
#### Example | ||
|
||
```java | ||
TranslateAnimation animation = new TranslateAnimation(0, displaySize.x - maxTextWidth - 2 * margin, 0, 0); | ||
animation.setFillAfter(true); | ||
animation.setDuration(ANIMATION_DURATION); | ||
animation.setInterpolator(new MotionCurveXStandardInterpolator()); | ||
view.startAnimation(animation); | ||
|
||
``` | ||
|
||
#### [Full Android Demo Project](./examples/Android) | ||
|
||
## Motion Curve Categories | ||
|
||
* [Linear](./docs/en-US/linear.md) | ||
* [Accelerate](./docs/en-US/accelerate.md) | ||
* [Decelerate](./docs/en-US/decelerate.md) | ||
* [Standard](./docs/en-US/standard.md) | ||
* [Anticipate](./docs/en-US/anticipate.md) | ||
* [Overshoot](./docs/en-US/overshoot.md) | ||
* [Spring](./docs/en-US/spring.md) | ||
* [Bounce](./docs/en-US/bounce.md) | ||
* [Cosine](./docs/en-US/cosine.md) | ||
|
||
# Code of Conduct | ||
|
||
Please refer to [Alibaba Open Source Code of Conduct](https://github.com/AlibabaDR/community/blob/master/CODE_OF_CONDUCT.md). | ||
|
||
|
||
# LICENCE | ||
|
||
gaia-motion-curve is licensed under the Apache License, Version 2.0. See LICENSE for the full license text. | ||
|
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
# Accelerate | ||
|
||
## Demo | ||
|
||
<img src="./assets/accelerate.gif" height="30%" width="30%"> | ||
|
||
## iOS | ||
|
||
Enumerate:GMCCurveTypeAccelerate | ||
|
||
```objc | ||
#import <GaiaMotionCurve/CALayer+GaiaMotionCurve.h> | ||
|
||
CGFloat right = [[UIScreen mainScreen] bounds].size.width - 80 - 20; | ||
GMCModel *model = [GMCModel modelWithKeyPath:@"position.x" | ||
duration:0.75 | ||
delay:0 | ||
curveType:GMCCurveTypeAccelerate | ||
fromValue:[NSValue gmc_valueWithCGFloat:_animationView.center.x] | ||
toValue:[NSValue gmc_valueWithCGFloat:right]]; | ||
__weak typeof(self) weakSelf = self; | ||
[_animationView.layer gmc_animateWithAnimationModels:@[model] completion:^(BOOL finished) { | ||
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ | ||
weakSelf.animationView.layer.frame = CGRectMake(80, 200, 40, 40); | ||
}); | ||
}]; | ||
``` | ||
## Android | ||
Interpolator:GaiaMotionCurveAccelerateInterpolator | ||
```java | ||
import com.gaia.MotionCurve.*; | ||
View animationView = findViewById(R.id.animation_view); | ||
TranslateAnimation animation = new TranslateAnimation(0, 700, 0, 0); | ||
animation.setFillAfter(true); | ||
animation.setDuration(700); | ||
animation.setInterpolator(new GaiaMotionCurveAccelerateInterpolator()); | ||
animationView.startAnimation(animation); | ||
``` | ||
|
||
## Customizable Parameters | ||
|
||
Configurable Parameters: | ||
|
||
``` | ||
x1: x coordinate of control point x1 | ||
y1: y coordinate of control point y1 | ||
x2: x coordinate of control point x2 | ||
y2: y coordinate of control point y2 | ||
``` | ||
|
||
Default: | ||
|
||
``` | ||
x1 = 0.4 | ||
y1 = 0.0 | ||
x2 = 1.0 | ||
y2 = 1.0 | ||
``` | ||
|
||
iOS | ||
|
||
```objective-c | ||
CGFloat right = [[UIScreen mainScreen] bounds].size.width - 80 - 20; | ||
GMCModel *model = [GMCModel modelWithKeyPath:@"position.x" | ||
duration:0.75 | ||
delay:0 | ||
curveType:GMCCurveTypeAccelerate | ||
customArgs:@{@"x1":@0.4,@"y1":@0.0,@"x2":@1.0,@"y2":@1.0} | ||
fromValue:[NSValue gmc_valueWithCGFloat:_animationView.center.x] | ||
toValue:[NSValue gmc_valueWithCGFloat:right]]; | ||
__weak typeof(self) weakSelf = self; | ||
[_animationView.layer gmc_animateWithAnimationModels:@[model] completion:^(BOOL finished) { | ||
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ | ||
weakSelf.animationView.layer.frame = CGRectMake(80, 200, 40, 40); | ||
}); | ||
}]; | ||
``` | ||
Android | ||
```java | ||
View animationView = findViewById(R.id.animation_view); | ||
TranslateAnimation animation = new TranslateAnimation(0, 700, 0, 0); | ||
animation.setFillAfter(true); | ||
animation.setDuration(700); | ||
animation.setInterpolator(new GaiaMotionCurveAccelerateInterpolator(0.4, 0.0, 1.0, 1.0)); | ||
animationView.startAnimation(animation); | ||
``` | ||
|
Oops, something went wrong.