tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Animation add keyFrame

Browse Source
This commit is contained in:
pengfei.zhou 2021-09-07 20:10:44 +08:00 committed by osborn
parent d7d19b17d0
commit 41e610e424
12 changed files with 443 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doric-android/app/build.gradle
View File

@ -44,5 +44,5 @@ dependencies {
annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
debugImplementation 'com.squareup.leakcanary:leakcanary-android:2.4'
debugImplementation 'com.squareup.leakcanary:leakcanary-android:2.7'
}

61
doric-android/doric/src/main/java/pub/doric/shader/ViewNode.java
View File

@ -19,7 +19,9 @@ import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ArgbEvaluator;
import android.animation.Keyframe;
import android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.content.Context;
import android.graphics.Color;
import android.graphics.LinearGradient;
@ -1054,28 +1056,49 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
private ObjectAnimator parseChangeable(JSObject jsObject, JSValue fillMode) {
String key = jsObject.getProperty("key").asString().value();
if ("backgroundColor".equals(key)) {
int startVal = jsObject.getProperty("fromValue").asNumber().toInt();
int endVal = jsObject.getProperty("toValue").asNumber().toInt();
ObjectAnimator animator = ObjectAnimator.ofInt(this,
key,
startVal,
endVal
);
animator.setEvaluator(new ArgbEvaluator());
setFillMode(animator, key, startVal, fillMode);
return animator;
boolean castInt = "backgroundColor".equals(key);
ObjectAnimator animator;
float startVal = 0;
if (jsObject.getProperty("keyFrames").isArray()) {
JSArray keyFrames = jsObject.getProperty("keyFrames").asArray();
Keyframe[] keyFrameArray = new Keyframe[keyFrames.size()];
for (int i = 0; i < keyFrames.size(); i++) {
JSObject keyFrame = keyFrames.get(i).asObject();
float percent = keyFrame.getProperty("percent").asNumber().toFloat();
float value = keyFrame.getProperty("value").asNumber().toFloat();
if (i == 0) {
startVal = value;
}
if (castInt) {
keyFrameArray[i] = Keyframe.ofInt(percent, (int) value);
} else {
keyFrameArray[i] = Keyframe.ofFloat(percent, value);
}
}
PropertyValuesHolder frameHolder = PropertyValuesHolder.ofKeyframe(key, keyFrameArray);
animator = ObjectAnimator.ofPropertyValuesHolder(this, frameHolder);
} else {
float startVal = jsObject.getProperty("fromValue").asNumber().toFloat();
startVal = jsObject.getProperty("fromValue").asNumber().toFloat();
float endVal = jsObject.getProperty("toValue").asNumber().toFloat();
ObjectAnimator animator = ObjectAnimator.ofFloat(this,
key,
startVal,
endVal
);
setFillMode(animator, key, startVal, fillMode);
return animator;
if (castInt) {
animator = ObjectAnimator.ofInt(this,
key,
(int) startVal,
(int) endVal
);
} else {
animator = ObjectAnimator.ofFloat(this,
key,
startVal,
endVal
);
}
}
if (castInt) {
animator.setEvaluator(new ArgbEvaluator());
}
setFillMode(animator, key, startVal, fillMode);
return animator;
}
private void setFillMode(ObjectAnimator animator,

145
doric-iOS/Pod/Classes/Shader/DoricViewNode.m
View File

@ -660,10 +660,10 @@ - (CAAnimation *)parseAnimation:(id)params {
} else if ([params isKindOfClass:[NSDictionary class]]) {
NSArray<NSDictionary *> *changeables = params[@"changeables"];
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
NSMutableArray <CABasicAnimation *> *animations = [NSMutableArray new];
NSMutableArray <CAAnimation *> *animations = [NSMutableArray new];
[changeables forEach:^(NSDictionary *obj) {
CABasicAnimation *animation = [self parseChangeable:obj fillMode:params[@"fillMode"]];
CAAnimation *animation = [self parseChangeable:obj fillMode:params[@"fillMode"]];
if (params[@"timingFunction"]) {
animation.timingFunction = [self translateToTimingFunction:params[@"timingFunction"]];
}
@ -672,7 +672,7 @@ - (CAAnimation *)parseAnimation:(id)params {
animationGroup.animations = animations;
animationGroup.delegate = [[AnimationCallback new] also:^(AnimationCallback *it) {
it.startBlock = ^(AnimationCallback *callback) {
[[animations map:^id(CABasicAnimation *obj) {
[[animations map:^id(CAAnimation *obj) {
return obj.delegate;
}] forEach:^(AnimationCallback *obj) {
if (obj.startBlock) {
@ -681,7 +681,7 @@ - (CAAnimation *)parseAnimation:(id)params {
}];
};
it.endBlock = ^(AnimationCallback *callback) {
[[animations map:^id(CABasicAnimation *obj) {
[[animations map:^id(CAAnimation *obj) {
return obj.delegate;
}] forEach:^(AnimationCallback *obj) {
if (obj.endBlock) {
@ -816,52 +816,101 @@ - (void)setAnimatedValue:(NSString *)key value:(NSNumber *)value {
}
}
- (CABasicAnimation *)parseChangeable:(NSDictionary *)params fillMode:(NSNumber *)fillMode {
- (CAAnimation *)parseChangeable:(NSDictionary *)params fillMode:(NSNumber *)fillMode {
NSString *key = params[@"key"];
CABasicAnimation *animation = [CABasicAnimation animation];
if ([@"translationX" isEqualToString:key]) {
animation.keyPath = @"transform.translation.x";
animation.fromValue = params[@"fromValue"];
animation.toValue = params[@"toValue"];
} else if ([@"translationY" isEqualToString:key]) {
animation.keyPath = @"transform.translation.y";
animation.fromValue = params[@"fromValue"];
animation.toValue = params[@"toValue"];
} else if ([@"scaleX" isEqualToString:key]) {
animation.keyPath = @"transform.scale.x";
animation.fromValue = params[@"fromValue"];
animation.toValue = params[@"toValue"];
} else if ([@"scaleY" isEqualToString:key]) {
animation.keyPath = @"transform.scale.y";
animation.fromValue = params[@"fromValue"];
animation.toValue = params[@"toValue"];
} else if ([@"rotation" isEqualToString:key]) {
animation.keyPath = @"transform.rotation.z";
animation.fromValue = @([params[@"fromValue"] floatValue] * M_PI);
animation.toValue = @([params[@"toValue"] floatValue] * M_PI);
} else if ([@"rotationX" isEqualToString:key]) {
animation.keyPath = @"transform.rotation.x";
animation.fromValue = @([params[@"fromValue"] floatValue] * M_PI);
animation.toValue = @([params[@"toValue"] floatValue] * M_PI);
} else if ([@"rotationY" isEqualToString:key]) {
animation.keyPath = @"transform.rotation.y";
animation.fromValue = @([params[@"fromValue"] floatValue] * M_PI);
animation.toValue = @([params[@"toValue"] floatValue] * M_PI);
} else if ([@"backgroundColor" isEqualToString:key]) {
animation.keyPath = @"backgroundColor";
animation.fromValue = (id)DoricColor(params[@"fromValue"]).CGColor;
animation.toValue = (id)DoricColor(params[@"toValue"]).CGColor;
} else if ([@"alpha" isEqualToString:key]) {
animation.keyPath = @"opacity";
animation.fromValue = params[@"fromValue"];
animation.toValue = params[@"toValue"];
NSArray *keyFrames = params[@"keyFrames"];
if (keyFrames && keyFrames.count > 0) {
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
NSMutableArray *values = [NSMutableArray new];
NSMutableArray *times = [NSMutableArray new];
for (NSDictionary *keyFrame in keyFrames) {
if ([@"rotation" isEqualToString:key]
|| [@"rotationX" isEqualToString:key]
|| [@"rotationY" isEqualToString:key]) {
[values addObject:@([keyFrame[@"value"] floatValue] * M_PI)];
} else if ([@"backgroundColor" isEqualToString:key]) {
[values addObject:(id) DoricColor(keyFrame[@"value"]).CGColor];
} else {
[values addObject:keyFrame[@"value"]];
}
[times addObject:keyFrame[@"percent"]];
}
animation.keyTimes = times;
animation.values = values;
if ([@"translationX" isEqualToString:key]) {
animation.keyPath = @"transform.translation.x";
} else if ([@"translationY" isEqualToString:key]) {
animation.keyPath = @"transform.translation.y";
} else if ([@"scaleX" isEqualToString:key]) {
animation.keyPath = @"transform.scale.x";
} else if ([@"scaleY" isEqualToString:key]) {
animation.keyPath = @"transform.scale.y";
} else if ([@"rotation" isEqualToString:key]) {
animation.keyPath = @"transform.rotation.z";
} else if ([@"rotationX" isEqualToString:key]) {
animation.keyPath = @"transform.rotation.x";
} else if ([@"rotationY" isEqualToString:key]) {
animation.keyPath = @"transform.rotation.y";
} else if ([@"backgroundColor" isEqualToString:key]) {
animation.keyPath = @"backgroundColor";
} else if ([@"alpha" isEqualToString:key]) {
animation.keyPath = @"opacity";
}
[self setFillMode:animation
key:key
startValue:params[@"fromValue"]
endValue:params[@"toValue"]
fillMode:fillMode];
return animation;
} else {
CABasicAnimation *animation = [CABasicAnimation animation];
if ([@"translationX" isEqualToString:key]) {
animation.keyPath = @"transform.translation.x";
animation.fromValue = params[@"fromValue"];
animation.toValue = params[@"toValue"];
} else if ([@"translationY" isEqualToString:key]) {
animation.keyPath = @"transform.translation.y";
animation.fromValue = params[@"fromValue"];
animation.toValue = params[@"toValue"];
} else if ([@"scaleX" isEqualToString:key]) {
animation.keyPath = @"transform.scale.x";
animation.fromValue = params[@"fromValue"];
animation.toValue = params[@"toValue"];
} else if ([@"scaleY" isEqualToString:key]) {
animation.keyPath = @"transform.scale.y";
animation.fromValue = params[@"fromValue"];
animation.toValue = params[@"toValue"];
} else if ([@"rotation" isEqualToString:key]) {
animation.keyPath = @"transform.rotation.z";
animation.fromValue = @([params[@"fromValue"] floatValue] * M_PI);
animation.toValue = @([params[@"toValue"] floatValue] * M_PI);
} else if ([@"rotationX" isEqualToString:key]) {
animation.keyPath = @"transform.rotation.x";
animation.fromValue = @([params[@"fromValue"] floatValue] * M_PI);
animation.toValue = @([params[@"toValue"] floatValue] * M_PI);
} else if ([@"rotationY" isEqualToString:key]) {
animation.keyPath = @"transform.rotation.y";
animation.fromValue = @([params[@"fromValue"] floatValue] * M_PI);
animation.toValue = @([params[@"toValue"] floatValue] * M_PI);
} else if ([@"backgroundColor" isEqualToString:key]) {
animation.keyPath = @"backgroundColor";
animation.fromValue = (id) DoricColor(params[@"fromValue"]).CGColor;
animation.toValue = (id) DoricColor(params[@"toValue"]).CGColor;
} else if ([@"alpha" isEqualToString:key]) {
animation.keyPath = @"opacity";
animation.fromValue = params[@"fromValue"];
animation.toValue = params[@"toValue"];
}
[self setFillMode:animation
key:key
startValue:params[@"fromValue"]
endValue:params[@"toValue"]
fillMode:fillMode];
return animation;
}
[self setFillMode:animation
key:key
startValue:params[@"fromValue"]
endValue:params[@"toValue"]
fillMode:fillMode];
return animation;
}
- (CAMediaTimingFunction *)translateToTimingFunction:(NSNumber *)timingFunction {

64
doric-js/bundle/doric-lib.es5.js
View File

@ -1668,6 +1668,7 @@ var Animation = /** @class */ (function () {
key: e.key,
fromValue: e.fromValue,
toValue: e.toValue,
keyFrames: e.keyFrames,
});
}
}
@ -1710,6 +1711,20 @@ var ScaleAnimation = /** @class */ (function (_super) {
_this.changeables.set("scaleY", _this.scaleYChangeable);
return _this;
}
Object.defineProperty(ScaleAnimation.prototype, "xKeyFrames", {
set: function (keyFrames) {
this.scaleXChangeable.keyFrames = keyFrames;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ScaleAnimation.prototype, "yKeyFrames", {
set: function (keyFrames) {
this.scaleYChangeable.keyFrames = keyFrames;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ScaleAnimation.prototype, "fromScaleX", {
get: function () {
return this.scaleXChangeable.fromValue;
@ -1770,6 +1785,20 @@ var TranslationAnimation = /** @class */ (function (_super) {
_this.changeables.set("translationY", _this.translationYChangeable);
return _this;
}
Object.defineProperty(TranslationAnimation.prototype, "xKeyFrames", {
set: function (keyFrames) {
this.translationXChangeable.keyFrames = keyFrames;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TranslationAnimation.prototype, "yKeyFrames", {
set: function (keyFrames) {
this.translationYChangeable.keyFrames = keyFrames;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TranslationAnimation.prototype, "fromTranslationX", {
get: function () {
return this.translationXChangeable.fromValue;
@ -1847,6 +1876,13 @@ var RotationAnimation = /** @class */ (function (_super) {
enumerable: false,
configurable: true
});
Object.defineProperty(RotationAnimation.prototype, "keyFrames", {
set: function (keyFrames) {
this.rotationChaneable.keyFrames = keyFrames;
},
enumerable: false,
configurable: true
});
return RotationAnimation;
}(Animation));
/**
@ -1884,6 +1920,13 @@ var RotationXAnimation = /** @class */ (function (_super) {
enumerable: false,
configurable: true
});
Object.defineProperty(RotationXAnimation.prototype, "keyFrames", {
set: function (keyFrames) {
this.rotationChaneable.keyFrames = keyFrames;
},
enumerable: false,
configurable: true
});
return RotationXAnimation;
}(Animation));
/**
@ -1921,6 +1964,13 @@ var RotationYAnimation = /** @class */ (function (_super) {
enumerable: false,
configurable: true
});
Object.defineProperty(RotationYAnimation.prototype, "keyFrames", {
set: function (keyFrames) {
this.rotationChaneable.keyFrames = keyFrames;
},
enumerable: false,
configurable: true
});
return RotationYAnimation;
}(Animation));
var BackgroundColorAnimation = /** @class */ (function (_super) {
@ -1955,6 +2005,13 @@ var BackgroundColorAnimation = /** @class */ (function (_super) {
enumerable: false,
configurable: true
});
Object.defineProperty(BackgroundColorAnimation.prototype, "keyFrames", {
set: function (keyFrames) {
this.backgroundColorChangeable.keyFrames = keyFrames.map(function (e) { return { percent: e.percent, value: e.value.toModel() }; });
},
enumerable: false,
configurable: true
});
return BackgroundColorAnimation;
}(Animation));
/**
@ -1992,6 +2049,13 @@ var AlphaAnimation = /** @class */ (function (_super) {
enumerable: false,
configurable: true
});
Object.defineProperty(AlphaAnimation.prototype, "keyFrames", {
set: function (keyFrames) {
this.opacityChangeable.keyFrames = keyFrames;
},
enumerable: false,
configurable: true
});
return AlphaAnimation;
}(Animation));
var AnimationSet = /** @class */ (function () {

28
doric-js/bundle/doric-lib.js
View File

@ -1277,6 +1277,7 @@ class Animation {
key: e.key,
fromValue: e.fromValue,
toValue: e.toValue,
keyFrames: e.keyFrames,
});
}
return {
@ -1308,6 +1309,12 @@ class ScaleAnimation extends Animation {
this.changeables.set("scaleX", this.scaleXChangeable);
this.changeables.set("scaleY", this.scaleYChangeable);
}
set xKeyFrames(keyFrames) {
this.scaleXChangeable.keyFrames = keyFrames;
}
set yKeyFrames(keyFrames) {
this.scaleYChangeable.keyFrames = keyFrames;
}
set fromScaleX(v) {
this.scaleXChangeable.fromValue = v;
}
@ -1349,6 +1356,12 @@ class TranslationAnimation extends Animation {
this.changeables.set("translationX", this.translationXChangeable);
this.changeables.set("translationY", this.translationYChangeable);
}
set xKeyFrames(keyFrames) {
this.translationXChangeable.keyFrames = keyFrames;
}
set yKeyFrames(keyFrames) {
this.translationYChangeable.keyFrames = keyFrames;
}
set fromTranslationX(v) {
this.translationXChangeable.fromValue = v;
}
@ -1399,6 +1412,9 @@ class RotationAnimation extends Animation {
get toRotation() {
return this.rotationChaneable.toValue;
}
set keyFrames(keyFrames) {
this.rotationChaneable.keyFrames = keyFrames;
}
}
/**
* Rotation range is [0..2]
@ -1425,6 +1441,9 @@ class RotationXAnimation extends Animation {
get toRotation() {
return this.rotationChaneable.toValue;
}
set keyFrames(keyFrames) {
this.rotationChaneable.keyFrames = keyFrames;
}
}
/**
* Rotation range is [0..2]
@ -1451,6 +1470,9 @@ class RotationYAnimation extends Animation {
get toRotation() {
return this.rotationChaneable.toValue;
}
set keyFrames(keyFrames) {
this.rotationChaneable.keyFrames = keyFrames;
}
}
class BackgroundColorAnimation extends Animation {
constructor() {
@ -1474,6 +1496,9 @@ class BackgroundColorAnimation extends Animation {
get toColor() {
return new Color(this.backgroundColorChangeable.toValue);
}
set keyFrames(keyFrames) {
this.backgroundColorChangeable.keyFrames = keyFrames.map(e => { return { percent: e.percent, value: e.value.toModel() }; });
}
}
/**
* Alpha range is [0..1]
@ -1500,6 +1525,9 @@ class AlphaAnimation extends Animation {
get to() {
return this.opacityChangeable.toValue;
}
set keyFrames(keyFrames) {
this.opacityChangeable.keyFrames = keyFrames;
}
}
class AnimationSet {
constructor() {

28
doric-js/bundle/doric-vm.js
View File

@ -2801,6 +2801,7 @@ class Animation {
key: e.key,
fromValue: e.fromValue,
toValue: e.toValue,
keyFrames: e.keyFrames,
});
}
return {
@ -2832,6 +2833,12 @@ class ScaleAnimation extends Animation {
this.changeables.set("scaleX", this.scaleXChangeable);
this.changeables.set("scaleY", this.scaleYChangeable);
}
set xKeyFrames(keyFrames) {
this.scaleXChangeable.keyFrames = keyFrames;
}
set yKeyFrames(keyFrames) {
this.scaleYChangeable.keyFrames = keyFrames;
}
set fromScaleX(v) {
this.scaleXChangeable.fromValue = v;
}
@ -2873,6 +2880,12 @@ class TranslationAnimation extends Animation {
this.changeables.set("translationX", this.translationXChangeable);
this.changeables.set("translationY", this.translationYChangeable);
}
set xKeyFrames(keyFrames) {
this.translationXChangeable.keyFrames = keyFrames;
}
set yKeyFrames(keyFrames) {
this.translationYChangeable.keyFrames = keyFrames;
}
set fromTranslationX(v) {
this.translationXChangeable.fromValue = v;
}
@ -2923,6 +2936,9 @@ class RotationAnimation extends Animation {
get toRotation() {
return this.rotationChaneable.toValue;
}
set keyFrames(keyFrames) {
this.rotationChaneable.keyFrames = keyFrames;
}
}
/**
* Rotation range is [0..2]
@ -2949,6 +2965,9 @@ class RotationXAnimation extends Animation {
get toRotation() {
return this.rotationChaneable.toValue;
}
set keyFrames(keyFrames) {
this.rotationChaneable.keyFrames = keyFrames;
}
}
/**
* Rotation range is [0..2]
@ -2975,6 +2994,9 @@ class RotationYAnimation extends Animation {
get toRotation() {
return this.rotationChaneable.toValue;
}
set keyFrames(keyFrames) {
this.rotationChaneable.keyFrames = keyFrames;
}
}
class BackgroundColorAnimation extends Animation {
constructor() {
@ -2998,6 +3020,9 @@ class BackgroundColorAnimation extends Animation {
get toColor() {
return new Color(this.backgroundColorChangeable.toValue);
}
set keyFrames(keyFrames) {
this.backgroundColorChangeable.keyFrames = keyFrames.map(e => { return { percent: e.percent, value: e.value.toModel() }; });
}
}
/**
* Alpha range is [0..1]
@ -3024,6 +3049,9 @@ class AlphaAnimation extends Animation {
get to() {
return this.opacityChangeable.toValue;
}
set keyFrames(keyFrames) {
this.opacityChangeable.keyFrames = keyFrames;
}
}
class AnimationSet {
constructor() {

44
doric-js/index.d.ts vendored
View File

@ -354,6 +354,10 @@ declare module 'doric/lib/src/ui/animation' {
key: AnimatedKey;
repeatCount?: number;
repeatMode?: RepeatMode;
keyFrames?: {
percent: number;
value: number;
}[];
}
export enum FillMode {
/**
@ -412,6 +416,10 @@ declare module 'doric/lib/src/ui/animation' {
key: AnimatedKey;
fromValue: number;
toValue: number;
keyFrames: {
percent: number;
value: number;
}[] | undefined;
}[];
repeatCount: number | undefined;
repeatMode: RepeatMode | undefined;
@ -422,6 +430,14 @@ declare module 'doric/lib/src/ui/animation' {
}
export class ScaleAnimation extends Animation {
constructor();
set xKeyFrames(keyFrames: {
percent: number;
value: number;
}[]);
set yKeyFrames(keyFrames: {
percent: number;
value: number;
}[]);
set fromScaleX(v: number);
get fromScaleX(): number;
set toScaleX(v: number);
@ -433,6 +449,14 @@ declare module 'doric/lib/src/ui/animation' {
}
export class TranslationAnimation extends Animation {
constructor();
set xKeyFrames(keyFrames: {
percent: number;
value: number;
}[]);
set yKeyFrames(keyFrames: {
percent: number;
value: number;
}[]);
set fromTranslationX(v: number);
get fromTranslationX(): number;
set toTranslationX(v: number);
@ -451,6 +475,10 @@ declare module 'doric/lib/src/ui/animation' {
get fromRotation(): number;
set toRotation(v: number);
get toRotation(): number;
set keyFrames(keyFrames: {
percent: number;
value: number;
}[]);
}
/**
* Rotation range is [0..2]
@ -461,6 +489,10 @@ declare module 'doric/lib/src/ui/animation' {
get fromRotation(): number;
set toRotation(v: number);
get toRotation(): number;
set keyFrames(keyFrames: {
percent: number;
value: number;
}[]);
}
/**
* Rotation range is [0..2]
@ -471,6 +503,10 @@ declare module 'doric/lib/src/ui/animation' {
get fromRotation(): number;
set toRotation(v: number);
get toRotation(): number;
set keyFrames(keyFrames: {
percent: number;
value: number;
}[]);
}
export class BackgroundColorAnimation extends Animation {
constructor();
@ -478,6 +514,10 @@ declare module 'doric/lib/src/ui/animation' {
get fromColor(): Color;
set toColor(v: Color);
get toColor(): Color;
set keyFrames(keyFrames: {
percent: number;
value: Color;
}[]);
}
/**
* Alpha range is [0..1]
@ -488,6 +528,10 @@ declare module 'doric/lib/src/ui/animation' {
get from(): number;
set to(v: number);
get to(): number;
set keyFrames(keyFrames: {
percent: number;
value: number;
}[]);
}
export class AnimationSet implements IAnimation {
delay?: number;

44
doric-js/lib/src/ui/animation.d.ts vendored
View File

@ -16,6 +16,10 @@ export interface Changeable {
key: AnimatedKey;
repeatCount?: number;
repeatMode?: RepeatMode;
keyFrames?: {
percent: number;
value: number;
}[];
}
export declare enum FillMode {
/**
@ -74,6 +78,10 @@ declare abstract class Animation implements IAnimation {
key: AnimatedKey;
fromValue: number;
toValue: number;
keyFrames: {
percent: number;
value: number;
}[] | undefined;
}[];
repeatCount: number | undefined;
repeatMode: RepeatMode | undefined;
@ -86,6 +94,14 @@ export declare class ScaleAnimation extends Animation {
private scaleXChangeable;
private scaleYChangeable;
constructor();
set xKeyFrames(keyFrames: {
percent: number;
value: number;
}[]);
set yKeyFrames(keyFrames: {
percent: number;
value: number;
}[]);
set fromScaleX(v: number);
get fromScaleX(): number;
set toScaleX(v: number);
@ -99,6 +115,14 @@ export declare class TranslationAnimation extends Animation {
private translationXChangeable;
private translationYChangeable;
constructor();
set xKeyFrames(keyFrames: {
percent: number;
value: number;
}[]);
set yKeyFrames(keyFrames: {
percent: number;
value: number;
}[]);
set fromTranslationX(v: number);
get fromTranslationX(): number;
set toTranslationX(v: number);
@ -118,6 +142,10 @@ export declare class RotationAnimation extends Animation {
get fromRotation(): number;
set toRotation(v: number);
get toRotation(): number;
set keyFrames(keyFrames: {
percent: number;
value: number;
}[]);
}
/**
* Rotation range is [0..2]
@ -129,6 +157,10 @@ export declare class RotationXAnimation extends Animation {
get fromRotation(): number;
set toRotation(v: number);
get toRotation(): number;
set keyFrames(keyFrames: {
percent: number;
value: number;
}[]);
}
/**
* Rotation range is [0..2]
@ -140,6 +172,10 @@ export declare class RotationYAnimation extends Animation {
get fromRotation(): number;
set toRotation(v: number);
get toRotation(): number;
set keyFrames(keyFrames: {
percent: number;
value: number;
}[]);
}
export declare class BackgroundColorAnimation extends Animation {
private backgroundColorChangeable;
@ -148,6 +184,10 @@ export declare class BackgroundColorAnimation extends Animation {
get fromColor(): Color;
set toColor(v: Color);
get toColor(): Color;
set keyFrames(keyFrames: {
percent: number;
value: Color;
}[]);
}
/**
* Alpha range is [0..1]
@ -159,6 +199,10 @@ export declare class AlphaAnimation extends Animation {
get from(): number;
set to(v: number);
get to(): number;
set keyFrames(keyFrames: {
percent: number;
value: number;
}[]);
}
export declare class AnimationSet implements IAnimation {
private animations;

28
doric-js/lib/src/ui/animation.js
View File

@ -76,6 +76,7 @@ class Animation {
key: e.key,
fromValue: e.fromValue,
toValue: e.toValue,
keyFrames: e.keyFrames,
});
}
return {
@ -107,6 +108,12 @@ export class ScaleAnimation extends Animation {
this.changeables.set("scaleX", this.scaleXChangeable);
this.changeables.set("scaleY", this.scaleYChangeable);
}
set xKeyFrames(keyFrames) {
this.scaleXChangeable.keyFrames = keyFrames;
}
set yKeyFrames(keyFrames) {
this.scaleYChangeable.keyFrames = keyFrames;
}
set fromScaleX(v) {
this.scaleXChangeable.fromValue = v;
}
@ -148,6 +155,12 @@ export class TranslationAnimation extends Animation {
this.changeables.set("translationX", this.translationXChangeable);
this.changeables.set("translationY", this.translationYChangeable);
}
set xKeyFrames(keyFrames) {
this.translationXChangeable.keyFrames = keyFrames;
}
set yKeyFrames(keyFrames) {
this.translationYChangeable.keyFrames = keyFrames;
}
set fromTranslationX(v) {
this.translationXChangeable.fromValue = v;
}
@ -198,6 +211,9 @@ export class RotationAnimation extends Animation {
get toRotation() {
return this.rotationChaneable.toValue;
}
set keyFrames(keyFrames) {
this.rotationChaneable.keyFrames = keyFrames;
}
}
/**
* Rotation range is [0..2]
@ -224,6 +240,9 @@ export class RotationXAnimation extends Animation {
get toRotation() {
return this.rotationChaneable.toValue;
}
set keyFrames(keyFrames) {
this.rotationChaneable.keyFrames = keyFrames;
}
}
/**
* Rotation range is [0..2]
@ -250,6 +269,9 @@ export class RotationYAnimation extends Animation {
get toRotation() {
return this.rotationChaneable.toValue;
}
set keyFrames(keyFrames) {
this.rotationChaneable.keyFrames = keyFrames;
}
}
export class BackgroundColorAnimation extends Animation {
constructor() {
@ -273,6 +295,9 @@ export class BackgroundColorAnimation extends Animation {
get toColor() {
return new Color(this.backgroundColorChangeable.toValue);
}
set keyFrames(keyFrames) {
this.backgroundColorChangeable.keyFrames = keyFrames.map(e => { return { percent: e.percent, value: e.value.toModel() }; });
}
}
/**
* Alpha range is [0..1]
@ -299,6 +324,9 @@ export class AlphaAnimation extends Animation {
get to() {
return this.opacityChangeable.toValue;
}
set keyFrames(keyFrames) {
this.opacityChangeable.keyFrames = keyFrames;
}
}
export class AnimationSet {
constructor() {

38
doric-js/src/ui/animation.ts
View File

@ -37,6 +37,10 @@ export interface Changeable {
key: AnimatedKey
repeatCount?: number
repeatMode?: RepeatMode
keyFrames?: {
percent: number,
value: number
}[]
}
export enum FillMode {
/**
@ -96,6 +100,7 @@ abstract class Animation implements IAnimation {
key: e.key,
fromValue: e.fromValue,
toValue: e.toValue,
keyFrames: e.keyFrames,
})
}
return {
@ -129,6 +134,12 @@ export class ScaleAnimation extends Animation {
this.changeables.set("scaleY", this.scaleYChangeable)
}
set xKeyFrames(keyFrames: { percent: number, value: number }[]) {
this.scaleXChangeable.keyFrames = keyFrames
}
set yKeyFrames(keyFrames: { percent: number, value: number }[]) {
this.scaleYChangeable.keyFrames = keyFrames
}
set fromScaleX(v: number) {
this.scaleXChangeable.fromValue = v
@ -179,6 +190,14 @@ export class TranslationAnimation extends Animation {
this.changeables.set("translationY", this.translationYChangeable)
}
set xKeyFrames(keyFrames: { percent: number, value: number }[]) {
this.translationXChangeable.keyFrames = keyFrames
}
set yKeyFrames(keyFrames: { percent: number, value: number }[]) {
this.translationYChangeable.keyFrames = keyFrames
}
set fromTranslationX(v: number) {
this.translationXChangeable.fromValue = v
}
@ -239,6 +258,10 @@ export class RotationAnimation extends Animation {
get toRotation() {
return this.rotationChaneable.toValue
}
set keyFrames(keyFrames: { percent: number, value: number }[]) {
this.rotationChaneable.keyFrames = keyFrames
}
}
/**
* Rotation range is [0..2]
@ -269,6 +292,10 @@ export class RotationXAnimation extends Animation {
get toRotation() {
return this.rotationChaneable.toValue
}
set keyFrames(keyFrames: { percent: number, value: number }[]) {
this.rotationChaneable.keyFrames = keyFrames
}
}
/**
* Rotation range is [0..2]
@ -299,6 +326,10 @@ export class RotationYAnimation extends Animation {
get toRotation() {
return this.rotationChaneable.toValue
}
set keyFrames(keyFrames: { percent: number, value: number }[]) {
this.rotationChaneable.keyFrames = keyFrames
}
}
export class BackgroundColorAnimation extends Animation {
@ -328,6 +359,10 @@ export class BackgroundColorAnimation extends Animation {
get toColor() {
return new Color(this.backgroundColorChangeable.toValue)
}
set keyFrames(keyFrames: { percent: number, value: Color }[]) {
this.backgroundColorChangeable.keyFrames = keyFrames.map(e => { return { percent: e.percent, value: e.value.toModel() } })
}
}
/**
@ -360,6 +395,9 @@ export class AlphaAnimation extends Animation {
get to() {
return this.opacityChangeable.toValue
}
set keyFrames(keyFrames: { percent: number, value: number }[]) {
this.opacityChangeable.keyFrames = keyFrames
}
}

28
doric-web/dist/index.js vendored
View File

@ -2855,6 +2855,7 @@ class Animation {
key: e.key,
fromValue: e.fromValue,
toValue: e.toValue,
keyFrames: e.keyFrames,
});
}
return {
@ -2886,6 +2887,12 @@ class ScaleAnimation extends Animation {
this.changeables.set("scaleX", this.scaleXChangeable);
this.changeables.set("scaleY", this.scaleYChangeable);
}
set xKeyFrames(keyFrames) {
this.scaleXChangeable.keyFrames = keyFrames;
}
set yKeyFrames(keyFrames) {
this.scaleYChangeable.keyFrames = keyFrames;
}
set fromScaleX(v) {
this.scaleXChangeable.fromValue = v;
}
@ -2927,6 +2934,12 @@ class TranslationAnimation extends Animation {
this.changeables.set("translationX", this.translationXChangeable);
this.changeables.set("translationY", this.translationYChangeable);
}
set xKeyFrames(keyFrames) {
this.translationXChangeable.keyFrames = keyFrames;
}
set yKeyFrames(keyFrames) {
this.translationYChangeable.keyFrames = keyFrames;
}
set fromTranslationX(v) {
this.translationXChangeable.fromValue = v;
}
@ -2977,6 +2990,9 @@ class RotationAnimation extends Animation {
get toRotation() {
return this.rotationChaneable.toValue;
}
set keyFrames(keyFrames) {
this.rotationChaneable.keyFrames = keyFrames;
}
}
/**
* Rotation range is [0..2]
@ -3003,6 +3019,9 @@ class RotationXAnimation extends Animation {
get toRotation() {
return this.rotationChaneable.toValue;
}
set keyFrames(keyFrames) {
this.rotationChaneable.keyFrames = keyFrames;
}
}
/**
* Rotation range is [0..2]
@ -3029,6 +3048,9 @@ class RotationYAnimation extends Animation {
get toRotation() {
return this.rotationChaneable.toValue;
}
set keyFrames(keyFrames) {
this.rotationChaneable.keyFrames = keyFrames;
}
}
class BackgroundColorAnimation extends Animation {
constructor() {
@ -3052,6 +3074,9 @@ class BackgroundColorAnimation extends Animation {
get toColor() {
return new Color(this.backgroundColorChangeable.toValue);
}
set keyFrames(keyFrames) {
this.backgroundColorChangeable.keyFrames = keyFrames.map(e => { return { percent: e.percent, value: e.value.toModel() }; });
}
}
/**
* Alpha range is [0..1]
@ -3078,6 +3103,9 @@ class AlphaAnimation extends Animation {
get to() {
return this.opacityChangeable.toValue;
}
set keyFrames(keyFrames) {
this.opacityChangeable.keyFrames = keyFrames;
}
}
class AnimationSet {
constructor() {

2
doric-web/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long