javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 11:01:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ios): symbol effects wip

Browse Source
This commit is contained in:
Nathan Walker
2024-07-02 11:51:17 -07:00
parent 71dfa15606
commit 0720709309
5 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/toolbox/src/pages/image-handling.ts
View File

@ -10,10 +10,10 @@ export function navigatingTo(args: EventData) {
export class DemoModel extends Observable { export class DemoModel extends Observable {
addingPhoto = false; addingPhoto = false;
symbolWiggleEffect: ImageSymbolEffects.Wiggle; symbolWiggleEffect = ImageSymbolEffects.Scale;
symbolBounceEffect: ImageSymbolEffects.Bounce; symbolBounceEffect = ImageSymbolEffects.Bounce;
symbolBreathEffect: ImageSymbolEffects.Breathe; symbolBreathEffect = ImageSymbolEffects.Breathe;
symbolRotateEffect: ImageSymbolEffects.Rotate; symbolRotateEffect = ImageSymbolEffects.Rotate;
pickImage() { pickImage() {
const context = create({ const context = create({

12
apps/toolbox/src/pages/image-handling.xml
View File

@ -14,15 +14,15 @@
<!-- SF Symbols with Effects --> <!-- SF Symbols with Effects -->
<ContentView height="1" width="100%" backgroundColor="#efefef" margin="10"></ContentView> <ContentView height="1" width="100%" backgroundColor="#efefef" margin="10"></ContentView>
<GridLayout rows="auto,auto,auto" columns="*,*"> <GridLayout rows="auto,auto,auto" columns="*,*">
<Image src="sys://photo.on.rectangle.angled" width="100" tintColor="green" 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" symbolEffect="{{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" 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" symbolEffect="{{symbolBreathEffect}}" 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" 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" symbolEffect="{{symbolWiggleEffect}}" padding="8" /> <Image row="2" col="1" src="sys://square.and.arrow.up" width="100" iosSymbolEffect="{{symbolWiggleEffect}}" padding="8" />
</GridLayout> </GridLayout>
</ios> </ios>

3
packages/core/ui/image/index.ios.ts
View File

@ -201,7 +201,8 @@ export class Image extends ImageBase {
return; return;
} }
const symbol = typeof value === 'string' ? ImageSymbolEffect.fromSymbol(value) : value; 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); this.nativeViewProtected.addSymbolEffectOptionsAnimatedCompletion(symbol.effect, symbol.options || NSSymbolEffectOptions.optionsWithRepeating(), true, symbol.completion || null);
} else { } else {
this.nativeViewProtected.removeAllSymbolEffects(); this.nativeViewProtected.removeAllSymbolEffects();

11
packages/core/ui/image/symbol-effects.android.ts
View File

@ -1,9 +1,8 @@
import { ImageSymbolEffectCommon, ImageSymbolEffects } from './symbol-effects-common'; import { ImageSymbolEffectCommon } from './symbol-effects-common';
import type { ImageSymbolEffect as ImageSymbolEffectDefinition } from './symbol-effects.d.ts'; export { ImageSymbolEffects } from './symbol-effects-common';
export { ImageSymbolEffects };
export const ImageSymbolEffect: typeof ImageSymbolEffectDefinition = class ImageSymbolEffect extends ImageSymbolEffectCommon implements ImageSymbolEffectDefinition { export class ImageSymbolEffect extends ImageSymbolEffectCommon {
static fromSymbol(symbol: string): ImageSymbolEffectDefinition { static fromSymbol(symbol: string) {
return new ImageSymbolEffect(); return new ImageSymbolEffect();
} }
}; }

8
packages/core/ui/image/symbol-effects.ios.ts
View File

@ -1,13 +1,13 @@
import { SDK_VERSION } from '../../utils/constants'; import { SDK_VERSION } from '../../utils/constants';
import { ImageSymbolEffectCommon, ImageSymbolEffects } from './symbol-effects-common'; 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) { constructor(symbol: NSSymbolEffect) {
super(); super();
this.effect = symbol; this.effect = symbol;
} }
static fromSymbol(symbol: string): ImageSymbolEffectDefinition | null { static fromSymbol(symbol: string): ImageSymbolEffect | null {
if (SDK_VERSION < 17) { if (SDK_VERSION < 17) {
return null; return null;
} }
@ -92,4 +92,4 @@ export const ImageSymbolEffect: typeof ImageSymbolEffectDefinition = class Image
return null; return null;
} }
}; }