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

feat: glass views

Browse Source
This commit is contained in:
Nathan Walker
2025-10-15 12:57:05 -07:00
parent ec4c79d066
commit 9b963b4019
5 changed files with 158 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/toolbox/src/pages/glass-effects.ts
View File

@@ -10,7 +10,7 @@ export function navigatingTo(args: EventData) {
export class GlassEffectModel extends Observable {
iosGlassEffectInteractive: GlassEffectConfig = {
interactive: true,
tint: '#faabab',
// tint: '#faabab',
variant: 'clear',
};
currentEffect: GlassEffectConfig = {
@@ -71,5 +71,29 @@ export class GlassEffectModel extends Observable {
this.glassTargetLabels['share'].animate({ opacity: this.glassMerged ? 1 : 0, duration: 300, curve: CoreTypes.AnimationCurve.easeInOut }).catch(() => {});
this.glassTargetLabels['like'].text = this.glassMerged ? 'Done' : 'Like';
// for testing, on tap, can see glass effect changes animating differences
this.testGlassBindingChanges();
}
testGlassBindingChanges() {
setTimeout(() => {
this.iosGlassEffectInteractive = {
interactive: false,
variant: 'regular',
// can even animate tint changes (requires starting of transparent tint)
// tint: '#faabab',
};
this.notifyPropertyChange('iosGlassEffectInteractive', this.iosGlassEffectInteractive);
setTimeout(() => {
this.iosGlassEffectInteractive = {
interactive: true,
variant: 'clear',
// by setting tint to transparent, it will animate on next change
// tint: '#00000000',
};
this.notifyPropertyChange('iosGlassEffectInteractive', this.iosGlassEffectInteractive);
}, 1500);
}, 1500);
}
}

46
apps/toolbox/src/pages/glass-effects.xml
View File

@@ -7,22 +7,23 @@
<GridLayout backgroundColor="#000">
<Image src="https://cdn.wallpapersafari.com/89/64/c6MnRY.jpg" stretch="aspectFill" iosOverflowSafeArea="true" />
<Image src="res://bg1.jpg" stretch="aspectFill" iosOverflowSafeArea="true" width="100%" height="100%" />
<!-- test color changes over light/dark backgrounds for text -->
<!-- <ContentView backgroundColor="#000" height="300" verticalAlignment="bottom"/> -->
<ScrollView >
<ScrollView backgroundColor="transparent">
<StackLayout>
<GridLayout height="400" tap="{{cycleImage}}"/>
<GridLayout rows="*,auto,auto,auto,auto,auto,*">
<Button row="2" text="Toggle Glass" tap="{{toggleGlassEffect}}" horizontalAlignment="center" verticalAlignment="middle" class="c-white font-weight-bold m-y-20 p-4" fontSize="22" borderRadius="32" width="300" height="100" touchAnimation="{{touchAnimation}}" iosGlassEffect="{{currentEffect}}"/>
<LiquidGlass row="3" width="300" height="100" borderRadius="32">
<Label text="Glass Interactive" fontSize="22" class="p-4 font-weight-bold text-center" />
<LiquidGlass row="3" width="300" height="100" borderRadius="32" iosGlassEffect="{{iosGlassEffectInteractive}}" >
<Label text="Glass Interactive" fontSize="22" class="font-weight-bold text-center c-white" />
</LiquidGlass>
<!--
<LiquidGlassContainer row="4" tap="{{toggleMergeGlass}}" horizontalAlignment="center" verticalAlignment="middle" class="m-t-20" width="300" height="100">
<LiquidGlass id="glass1" loaded="{{loadedGlass}}" borderRadius="50" width="100" height="100">
<Label id="share" text="Share" fontSize="22" class="font-weight-bold text-center" width="100" height="100" loaded="{{loadedGlassLabels}}" />
@@ -30,29 +31,26 @@
<LiquidGlass id="glass2" loaded="{{loadedGlass}}" borderRadius="50" width="100" height="100">
<Label id="like" text="Like" fontSize="22" class="font-weight-bold text-center" loaded="{{loadedGlassLabels}}" />
</LiquidGlass>
</LiquidGlassContainer> -->
</LiquidGlassContainer>
</GridLayout>
<GridLayout height="600"/>
<GridLayout rows="*,auto,auto,auto,*" class="m-t-10">
<GridLayout row="1" width="300" height="100" iosGlassEffect="regular" horizontalAlignment="center" verticalAlignment="middle" borderRadius="32">
<Label class="text-center c-white" fontWeight="bold" fontSize="18" text="Glass Effects Regular" />
</GridLayout>
<GridLayout row="2" width="300" height="100" iosGlassEffect="clear" horizontalAlignment="center" verticalAlignment="middle" class="m-t-10" borderRadius="32">
<Label class="text-center c-white" fontWeight="bold" fontSize="18" text="Glass Effects Clear" />
</GridLayout>
<GridLayout row="3" width="300" height="100" iosGlassEffect="{{iosGlassEffectInteractive}}" horizontalAlignment="center" verticalAlignment="middle" class="m-t-10" borderRadius="32">
<Label class="text-center c-white" fontWeight="bold" fontSize="18" text="Glass Effects Interactive" />
</GridLayout>
</GridLayout>
</StackLayout>
</ScrollView>
<!-- Alternative setup -->
<GridLayout rows="*,auto,auto,auto,*">
<GridLayout row="1" width="300" height="150" iosGlassEffect="regular" horizontalAlignment="center" verticalAlignment="middle">
<Label class="text-center c-white" fontWeight="bold" fontSize="18" text="Glass Effects Regular" />
</GridLayout>
<GridLayout row="2" width="300" height="150" iosGlassEffect="clear" horizontalAlignment="center" verticalAlignment="middle" class="m-t-10">
<Label class="text-center c-white" fontWeight="bold" fontSize="18" text="Glass Effects Clear" />
</GridLayout>
<GridLayout row="3" width="300" height="150" iosGlassEffect="{{iosGlassEffectInteractive}}" horizontalAlignment="center" verticalAlignment="middle" class="m-t-10">
<Label class="text-center c-white" fontWeight="bold" fontSize="18" text="Glass Effects Interactive" />
</GridLayout>
</GridLayout>
</GridLayout>
</Page>