diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..94e9221bf28d922a2427ded919f274158ca49b3d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,10 @@
+/oh_modules
+/build
+/.hvigor/cache
+/.hvigor/dependencyMap
+/.hvigor/outputs
+/.hvigor/report
+/entry/build
+.idea
+.clang-format
+oh-package-lock.json5
diff --git a/entry/src/main/ets/view/Home.ets b/entry/src/main/ets/view/Home.ets
index 5dfce5283991e04e5960f5343f77d2737495c014..6afa60e5355e20ca744094197a26bc37e5198020 100644
--- a/entry/src/main/ets/view/Home.ets
+++ b/entry/src/main/ets/view/Home.ets
@@ -14,7 +14,7 @@
 */
 
 import { deviceInfo } from '@kit.BasicServicesKit';
-import lottie from '@ohos/lottie';
+import lottie, { AnimationItem } from '@ohos/lottie';
 import { BreakpointConstants } from '../constants/BreakpointConstants';
 import { CommonConstants } from '../constants/CommonConstants';
 import { ResourceUtil } from '../utils/ResourceUtil';
@@ -53,6 +53,9 @@ export struct Home {
     canvasRenderingContext: this.canvasRenderingContext3
   };
 
+  aboutToDisappear(): void {
+    this.destroyLottie();
+  }
   build() {
     Column() {
       Tabs({
@@ -114,7 +117,10 @@ export struct Home {
         .width($r('app.float.canvas_size'))
         .height($r('app.float.canvas_size'))
         .onReady(() => {
-          lottie.loadAnimation({
+          tabBarOption.canvasRenderingContext.imageSmoothingEnabled = true;
+          tabBarOption.canvasRenderingContext.imageSmoothingQuality = 'medium'
+          lottie.destroy(tabBarOption.name);
+          const item = lottie.loadAnimation({
             container: tabBarOption.canvasRenderingContext,
             renderer: 'canvas',
             loop: false,
@@ -122,7 +128,12 @@ export struct Home {
             name: tabBarOption.name,
             path: tabBarOption.path,
           });
-          this.lottieController();
+          tabBarOption.lottieItem = item;
+          item.addEventListener('DOMLoaded', (args: Object): void => {
+            if (tabBarOption.index === this.currentBottomIndex) {
+              item.play();
+            }
+          })
         })
       Text(tabBarOption.text)
         .fontSize($r('app.float.tab_font_size'))
@@ -141,6 +152,15 @@ export struct Home {
     .width(CommonConstants.FULL_PERCENT)
     .justifyContent(FlexAlign.Center)
   }
+
+  destroyLottie() {
+    this.tabBarOption1.lottieItem?.removeEventListener('DOMLoaded');
+    this.tabBarOption2.lottieItem?.removeEventListener('DOMLoaded');
+    this.tabBarOption3.lottieItem?.removeEventListener('DOMLoaded');
+    lottie.destroy(this.tabBarOption1.name);
+    lottie.destroy(this.tabBarOption2.name);
+    lottie.destroy(this.tabBarOption3.name);
+  }
 }
 
 interface TabBarOption {
@@ -149,4 +169,5 @@ interface TabBarOption {
   name: string;
   path: string;
   canvasRenderingContext: CanvasRenderingContext2D;
+  lottieItem?: AnimationItem;
 }
\ No newline at end of file