QML文字灰飛煙滅(優化篇)

2022-07-04 01:24:10 字數 1342 閱讀 4400

在前面章節我們實現了qml灰飛煙滅的效果,但是煙霧顯示過於急促像是狂風大作,這裡我們對原始碼進行引數調整,讓效果更自然。

讓顯示更加自然,從兩方面進行優化:1)降低煙霧的發射速度;2)優化文字的消失過程。

先看下優化後的效果

圖1首先我們先降低emitter的粒子速度

velocity: pointdirection
降低端流的加速度

strength: 128
文字消失效果優化,我們需要讓文字呈現如圖2的變化過程。

圖2由於我們讓text產生這種效果會比較麻煩,這裡採用的是另外一種方式來實現。我們給text建立蒙版圖層同時讓原text隱藏,後對蒙版進行逐漸消失。

讓text隱藏

visible: false;
蒙版圖層**

lineargradient 

gradientstop}}

最後我們再調下動畫的過程,整個動畫過程分兩步並行過程:

第一步並行過程:

1,文字的底部逐步變成透明色,頂部逐步半透明化;

2,粒子發射範圍從0到4000逐漸增加。

第二步並行過程:

1,文字逐漸透明化消失;

2,粒子發射範圍從4000到0逐漸減少。

最終**如下:

import qtquick 2.4

import qtquick.window 2.2

import qtquick.particles 2.0

import qtgraphicaleffects 1.0

window

lineargradient

gradientstop}}

particlesystem

imageparticle

emitter

}turbulence

sequentialanimation

propertyanimation

propertyanimation

propertyanimation

}parallelanimation

propertyanimation

propertyanimation

}onstopped: myemitter.enabled = false

}mousearea }}

}

QML效能優化

可以參考官方提示 大牛翻譯的 避免執行時組合,還要記住,通過在應用程式中提供預先組合的影象資源 例如,提供帶陰影效果的元素 可以避免在執行時進行合成工作。避免平滑影象,image.smooth僅在需要時啟用。它在某些硬體上較慢,如果影象以其自然大小顯示,則沒有視覺效果。繪畫,避免多次塗抹同一區域。使...

效能優化篇

一 在使用gallery控制項時,如果載入的過多,過大,就很容易出現outofmemoryerror異常,就是記憶體溢位。這是因為android預設分配的記憶體只有幾m,而載入的如果是jpg之類的壓縮格式,在記憶體中展開時就會占用大量的空間,也就容易記憶體溢位。這時可以用下面的方法解決 view p...

效能優化篇

效能優化 1.首先說出效能優化的點 2.在說到ssr的時候以及節流防抖的時候 ssr為什麼能減少白屏事件 目前前後端的分離的前端專案需要先載入靜態資源,再非同步獲取資料,最後渲染頁面,在這個過程中的前兩部頁面都是沒有資料的,影響了首屏的渲染速度,也就影響了使用者的體驗 nuxt.js的概念 節流防抖...