mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-15 11:01:21 +08:00
fix(ios): symbol effects wip
This commit is contained in:
@ -10,10 +10,10 @@ export function navigatingTo(args: EventData) {
|
||||
|
||||
export class DemoModel extends Observable {
|
||||
addingPhoto = false;
|
||||
symbolWiggleEffect: ImageSymbolEffects.Wiggle;
|
||||
symbolBounceEffect: ImageSymbolEffects.Bounce;
|
||||
symbolBreathEffect: ImageSymbolEffects.Breathe;
|
||||
symbolRotateEffect: ImageSymbolEffects.Rotate;
|
||||
symbolWiggleEffect = ImageSymbolEffects.Scale;
|
||||
symbolBounceEffect = ImageSymbolEffects.Bounce;
|
||||
symbolBreathEffect = ImageSymbolEffects.Breathe;
|
||||
symbolRotateEffect = ImageSymbolEffects.Rotate;
|
||||
|
||||
pickImage() {
|
||||
const context = create({
|
||||
|
@ -14,15 +14,15 @@
|
||||
<!-- SF Symbols with Effects -->
|
||||
<ContentView height="1" width="100%" backgroundColor="#efefef" margin="10"></ContentView>
|
||||
<GridLayout rows="auto,auto,auto" columns="*,*">
|
||||
<Image src="sys://photo.on.rectangle.angled" width="100" tintColor="green" symbolEffect="{{symbolWiggleEffect}}" padding="8"/>
|
||||
<Image col="1" src="sys://steeringwheel.and.hands" width="100" tintColor="black" symbolEffect="{{symbolWiggleEffect}}" padding="8" />
|
||||
<Image src="sys://photo.on.rectangle.angled" width="100" tintColor="green" iosSymbolEffect="{{symbolWiggleEffect}}" padding="8"/>
|
||||
<Image col="1" src="sys://steeringwheel.and.hands" width="100" tintColor="black" iosSymbolEffect="{{symbolWiggleEffect}}" padding="8" />
|
||||
|
||||
<Image row="1" src="sys://airpods.pro.chargingcase.wireless.radiowaves.left.and.right.fill" width="100" symbolEffect="{{symbolBounceEffect}}" padding="8" />
|
||||
<Image row="1" col="1" src="sys://lungs.fill" width="100" symbolEffect="{{symbolBreathEffect}}" padding="8" />
|
||||
<Image row="1" src="sys://airpods.pro.chargingcase.wireless.radiowaves.left.and.right.fill" width="100" iosSymbolEffect="{{symbolBounceEffect}}" padding="8" />
|
||||
<Image row="1" col="1" src="sys://lungs.fill" width="100" iosSymbolEffect="{{symbolBreathEffect}}" padding="8" />
|
||||
|
||||
|
||||
<Image row="2" src="sys://clock.arrow.trianglehead.2.counterclockwise.rotate.90" width="100" symbolEffect="{{symbolRotateEffect}}" padding="8" />
|
||||
<Image row="2" col="1" src="sys://square.and.arrow.up" width="100" symbolEffect="{{symbolWiggleEffect}}" padding="8" />
|
||||
<Image row="2" src="sys://clock.arrow.trianglehead.2.counterclockwise.rotate.90" width="100" iosSymbolEffect="{{symbolRotateEffect}}" padding="8" />
|
||||
<Image row="2" col="1" src="sys://square.and.arrow.up" width="100" iosSymbolEffect="{{symbolWiggleEffect}}" padding="8" />
|
||||
</GridLayout>
|
||||
</ios>
|
||||
|
||||
|
@ -201,7 +201,8 @@ export class Image extends ImageBase {
|
||||
return;
|
||||
}
|
||||
const symbol = typeof value === 'string' ? ImageSymbolEffect.fromSymbol(value) : value;
|
||||
if (symbol && symbol.effect) {
|
||||
if (symbol?.effect) {
|
||||
console.log('symbol.effect:', symbol.effect);
|
||||
this.nativeViewProtected.addSymbolEffectOptionsAnimatedCompletion(symbol.effect, symbol.options || NSSymbolEffectOptions.optionsWithRepeating(), true, symbol.completion || null);
|
||||
} else {
|
||||
this.nativeViewProtected.removeAllSymbolEffects();
|
||||
|
@ -1,9 +1,8 @@
|
||||
import { ImageSymbolEffectCommon, ImageSymbolEffects } from './symbol-effects-common';
|
||||
import type { ImageSymbolEffect as ImageSymbolEffectDefinition } from './symbol-effects.d.ts';
|
||||
export { ImageSymbolEffects };
|
||||
import { ImageSymbolEffectCommon } from './symbol-effects-common';
|
||||
export { ImageSymbolEffects } from './symbol-effects-common';
|
||||
|
||||
export const ImageSymbolEffect: typeof ImageSymbolEffectDefinition = class ImageSymbolEffect extends ImageSymbolEffectCommon implements ImageSymbolEffectDefinition {
|
||||
static fromSymbol(symbol: string): ImageSymbolEffectDefinition {
|
||||
export class ImageSymbolEffect extends ImageSymbolEffectCommon {
|
||||
static fromSymbol(symbol: string) {
|
||||
return new ImageSymbolEffect();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
@ -1,13 +1,13 @@
|
||||
import { SDK_VERSION } from '../../utils/constants';
|
||||
import { ImageSymbolEffectCommon, ImageSymbolEffects } from './symbol-effects-common';
|
||||
import type { ImageSymbolEffect as ImageSymbolEffectDefinition } from './symbol-effects.d.ts';
|
||||
export { ImageSymbolEffects } from './symbol-effects-common';
|
||||
|
||||
export const ImageSymbolEffect: typeof ImageSymbolEffectDefinition = class ImageSymbolEffect extends ImageSymbolEffectCommon implements ImageSymbolEffectDefinition {
|
||||
export class ImageSymbolEffect extends ImageSymbolEffectCommon {
|
||||
constructor(symbol: NSSymbolEffect) {
|
||||
super();
|
||||
this.effect = symbol;
|
||||
}
|
||||
static fromSymbol(symbol: string): ImageSymbolEffectDefinition | null {
|
||||
static fromSymbol(symbol: string): ImageSymbolEffect | null {
|
||||
if (SDK_VERSION < 17) {
|
||||
return null;
|
||||
}
|
||||
@ -92,4 +92,4 @@ export const ImageSymbolEffect: typeof ImageSymbolEffectDefinition = class Image
|
||||
|
||||
return null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
Reference in New Issue
Block a user