增加显示隐藏动画

app/src/main/ets/pages/Index.ets

@@ -44,6 +44,9 @@ struct Index {
     ScreenUtil.getInstance().setPreferredOrientation(window.Orientation.AUTO_ROTATION);
   }
 
+  /**
+   * 页面的进入 退出动画 router时生效
+   */
   pageTransition() {
     // 定义页面进入时的效果，无论页面栈发生push还是pop操作均可生效
     PageTransitionEnter({ type: RouteType.None, duration: 100 }).opacity(1)
@@ -51,6 +54,10 @@ struct Index {
     PageTransitionExit({ type: RouteType.None, duration: 100 }).opacity(0)
   }
 
+  /**
+   * 拦截手势侧滑返回和标题栏的返回按钮, 增加弹窗提醒。
+   * @returns
+   */
   onBackPress(): boolean | void {
     // 弹出自定义的询问框
     promptAction.showDialog({
@@ -83,15 +90,11 @@ struct Index {
     return true;
   }
 
-  async onTitleBarLeftClick(_event: ClickEvent) {
-   this.onBackPress;
-  }
-
   build() {
     Column() {
       TitleBar({
         title: this.title,
-        onLeftClicked: ()=> {this.onBackPress()},
+        onLeftClicked: ()=> { this.onBackPress() },
         rightMenuType: TitleBarMenuType.None
       }).width('100%')
 
@@ -104,7 +107,9 @@ struct Index {
             router.pushUrl({url: "pages/layout/LinearLayoutPage"});
           });
 
-          Button().width(100).height('100%').type(ButtonType.Normal);
+          Button("Animation").width(100).height('100%').type(ButtonType.Normal).onClick(() =>{
+            router.pushUrl({url: "pages/animation/CompTransitionPage"});
+          });
 
         }.width('100%').height(48).justifyContent(FlexAlign.SpaceEvenly)
       }.justifyContent(FlexAlign.Center).width('100%')

app/src/main/ets/pages/animation/CompTransitionPage.ets

@@ -0,0 +1,44 @@
+import { CommonMediaName, CommonRes, TitleBar, TitleBarMenuType } from '@devwiki/common_ui/Index'
+import { curves, router } from '@kit.ArkUI';
+
+
+@Entry
+@Component
+struct CompTransitionPage {
+  @State isShow: boolean = true;
+  @State headHeight: string = '';
+  @State rightIcon: Resource = CommonRes.getIconEyeOff();
+
+  build() {
+    Column({ space: 8 }) {
+      TitleBar({
+        title: "CompTransitionPage",
+        titleTextAlign: TextAlign.Center,
+        onLeftClicked: () => {
+          router.back()
+        },
+        rightMenuType: TitleBarMenuType.Icon,
+        rightIcon: this.rightIcon,
+        onRightClicked: () => {
+          this.isShow = !this.isShow;
+          if (this.isShow) {
+            this.headHeight = ''
+            this.rightIcon = CommonRes.getIconEyeOff()
+          } else {
+            this.headHeight = '0%'
+            this.rightIcon = CommonRes.getIconEyeOn()
+          }
+        }
+      });
+      Column({ space: 8 }) {
+        Text("第1行");
+        Text("第2行");
+        Text("第3行");
+        Text("第4行");
+      }.width('100%').height(this.headHeight).backgroundColor('#8bc34a')
+      .animation({ curve: curves.springMotion() })
+
+      Column().height('100%').width('100%').borderWidth(1).borderColor('#ff5722')
+    }.height('100%').width('100%')
+  }
+}

app/src/main/resources/base/profile/main_pages.json

@@ -2,6 +2,7 @@
   "src": [
     "pages/Index",
     "pages/web/WebPage",
-    "pages/layout/LinearLayoutPage"
+    "pages/layout/LinearLayoutPage",
+    "pages/animation/CompTransitionPage"
   ]
 }

common_ui/Index.ets

@@ -4,5 +4,5 @@ export { WebViewEventKey } from './src/main/ets/event/EventKey'
 export { Emitter } from './src/main/ets/event/Emitter'
 export { WebView, WebViewController, WebViewParam } from './src/main/ets/component/web/WebView'
 
-export { CommonRes } from './src/main/ets/utils/CommonRes'
+export { CommonRes, CommonMediaName } from './src/main/ets/utils/CommonRes'
 export { ScreenUtil } from './src/main/ets/utils/ScreenUtil'

common_ui/src/main/ets/utils/CommonRes.ets

@@ -14,4 +14,23 @@ export class CommonRes {
   public static getIconClose(): Resource {
     return $r("app.media.ic_close");
   }
+
+  public static getIconEyeOn(): Resource {
+    return $r("app.media.ic_eye_on");
+  }
+
+  public static getIconEyeOff(): Resource {
+    return $r("app.media.ic_eye_off");
+  }
+
+  public static getImageRes(resName: string): Resource {
+    return $r(`app.media.${resName}`);
+  }
+}
+
+export class CommonMediaName {
+  private constructor() {
+  }
+  static readonly IcEyeOn = "ic_eye_on";
+  static readonly IcEyeOff = "ic_eye_ff";
 }

common_ui/src/main/resources/base/media/ic_eye_off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>eye-off</title><path d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z" /></svg>

common_ui/src/main/resources/base/media/ic_eye_on.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>eye</title><path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" /></svg>