在上一篇博文《[UWP]在UWP平臺中使用Lottie動畫》中我簡單介紹了一下LottieUWP專案於以及如何使用它呈現Lottie動畫，我們這篇文章來講點進階的東西——快取Lottie動畫幀。

為什麼會有這樣的需求呢？

有兩方面原因：

• 直接在介面使用Lottie動畫時，是邊播放邊渲染，計算量比較大，某些Lottie檔案會非常吃效能！另外也會存在渲染不正確（有黑色區域）的情況，但是如果我們把每一幀快取下來，自己控制播放的話，效能會提升很多！
• 應用於視訊合成時（給視訊新增Lottie動畫掛件），需要獲取每一時刻的動畫幀影象（UWP媒體編輯以及視訊合成的相關知識也很多，有時間我會整理一下，分享點乾貨）。

獲取Lottie中某一幀影象

在上一篇中我們使用了LottieAnimationView控制元件來播放Lottie動畫，其實另一個類LottieDrawable也可以完成同樣的工作，並且更易擴充套件。

下面我們就修改下LottieDrawable類，讓它可以返回給我們某一時刻的幀影象。

在LottieDrawable類中，Lottie動畫的播放進度由Progress屬性控制，而實際上的呈現則是使用了Win2D中的CanvasAnimatedControl控制元件來承載繪製目標。

這樣的話其實我們要做的就很簡單了。我們可以新增一個GetCurrentFrame方法，使用CanvasRenderTarget

具體程式碼如下：

        /// <summary>
        /// 獲取當前進度時的Lottie影象
        /// </summary>
        /// <param name="resourceCreator"></param>
        /// <param name="scaleX">橫向縮放倍數</param>
        /// <param name="scaleY">縱向縮放倍數</param>
        /// <returns></returns>
        public CanvasBitmap GetCurrentFrame(ICanvasResourceCreator resourceCreator, float scaleX, float scaleY)
        {
            lock (this)
            {
                var width = _composition.Bounds.Width * scaleX;
                var height = _composition.Bounds.Height * scaleY;
                var commandList = new CanvasRenderTarget(resourceCreator, (float)width, (float)height, 96f);
                using (var session = commandList.CreateDrawingSession())
                {

                    if (_bitmapCanvas == null || _bitmapCanvas.Width < width || _bitmapCanvas.Height < height)
                    {
                        _bitmapCanvas?.Dispose();
                        _bitmapCanvas = new BitmapCanvas(width, height);
                    }

                    using (_bitmapCanvas.CreateSession(resourceCreator.Device, (float)width,
                        (float)height, session))
                    {
                        _bitmapCanvas.Clear(Colors.Transparent);
                        LottieLog.BeginSection("Drawable.Draw");
                        if (_compositionLayer == null)
                        {
                            return null;
                        }

                        _matrix.Reset();
                        _matrix = MatrixExt.PreScale(_matrix, scaleX, scaleY);
                        _compositionLayer.Draw(_bitmapCanvas, _matrix, _alpha);
                        LottieLog.EndSection("Drawable.Draw");
                    }

                }

                return commandList;
            }
        }
 

有一點要注意的是這裡的繪製目標使用了CanvasRenderTarget，切勿使用CanvasCommandList，區別在於CanvasRenderTarget有固定尺寸，而CanvasCommandList實際上有無限的空間，使用CanvasCommandList作為繪製目標將會引起某些Lottie動畫繪製時丟失部分內容，具體可參見我在LottieUWP專案上提的這個Issue 。

快取Lottie動畫幀

有了上面新增的GetCurrentFrame方法後，我們就可以通過修改Progress來獲取到Lottie動畫中每一時刻的幀影象。

我編寫了一個快取Lottie動畫幀的方法：

protected List<CanvasBitmap> CacheLottieFrames;
        /// <summary>
        /// 快取Lottie動畫幀
        /// </summary>
        /// <param name="width">快取影象的寬</param>
        /// <param name="height">快取影象的高</param>
        /// <param name="frameRate">快取的幀率</param>
        /// <returns></returns>
        private async Task InitLottieFrame(double width, double height,int frameRate)
        {
            await Task.Run(() =>
            {
                lock (_lockObj)
                {
                    if (lottieDrawable != null)
                    {
                        var duration = lottieDrawable.Composition.Duration;
                        var scaleX = width / lottieDrawable.Composition.Bounds.Width;
                        var scaleY = height / lottieDrawable.Composition.Bounds.Height;
                        var timeGap = 1d / frameRate;
                        CacheLottieFrames = new List<CanvasBitmap>();
                        for (var i = 0d; i < duration; i += timeGap)
                        {
                            lottieDrawable.Progress = (float)(i / duration);
                            var renderTarget =
                                new CanvasRenderTarget(lottieDrawable.Device, (float)CanvasWidth, (float)CanvasHeight, 96f);
                            using (var session = renderTarget.CreateDrawingSession())
                            {
                                session.Clear(Colors.Transparent);
                                var effectImg = lottieDrawable.GetCurrentFrame(lottieDrawable.Device, (float)scaleX, (float)scaleY);
                                if (effectImg != null)
                                    session.DrawImage(effectImg);
                            }

                            CacheLottieFrames.Add(renderTarget);
                        }
                    }
                }

            });
        }

實際上LottieDrawable.Composition中可以獲取到幀的總數量以及幀率，但是我這裡沒有使用，因為我想按照我傳入的幀率來控制動畫。

結尾

有關於UWP使用Lottie動畫的相關博文到這裡就結束了，這段時間接觸下來，我的感受是Lottie動畫真的挺好玩效果也很棒。在LottieFiles網站大家可以找到各種有趣好玩的Lottie動畫，當然有能力的也可以自己製作。

本篇部落格到此結束！謝謝大家閱讀！