Lottie File Player component - FREE (raw/hack.. Please cleanup/share).

[CastleSoft]

2023-01-31-uniLottie-V100.zip

 

Attached is a SIMPLE uniGUI component to display Lottie Animations using the player. It's raw and a quick hack that could do with some work, use as you like.

A handy little control to add Lottie animations to your uniGUI app.

https://lottiefiles.com/featured

 

 

 

 

 

Properties published from the control are:

 

      property ShowControls: Boolean read fControls write fControls;
      property Hover: Boolean read fHover write fHover;
      property Autoplay: Boolean read fAutoplay write fAutoplay;
      property Loop: Boolean read fLoop write fLoop;
      property BackgroundColour: string read fBackgroundColour write fBackgroundColour;
      property AnimationWidth: string read fWidth write fWidth;
      property AnimationfHeight: string read fHeight write fHeight;
      property AnimationSeed: float32 read fAnimationSpeed write fAnimationSpeed;
      property PlayMode: TPlayModes read fPlayMode write fPlayMode;
      property Direction: TDirection read fDirection write fDirection;
      property AnimationFile: string read fAnimationFile write fAnimationFile;

 

 

[CastleSoft]

unit uniLottie;
{------------------------------------------------------------------------------}
{                                                                              }
{ uniLottie                                                                    }
{ =============                                                                }
{                                                                              }
{ Description:  This class contains a wrapper for the Lottie javascript        }
{               library.                                                       }
{                                                                              }
{               Github:  https://lottiefiles.com/web-player                    }
{                                                                              }
{ Installation: Under the files folder copy the following files:               }
{               lottie/lottie-player.js                                        }
{               lottie/myanimation.json                                        }
{                                                                              }
{ This source code is copyrighted material.                                    }
{                                                                              }
{ Copyright (c) CastleSoft Pty Ltd. 2017-2023. All rights reserved.            }
{                                                                              }
{                                                                              }
{ MIT License                                                                  }
{                                                                              }
{ Permission is hereby granted, free of charge, to any person obtaining a copy }
{ of this software and associated documentation files (the "Software"), to     }
{ deal in the Software without restriction, including without limitation the   }
{ rights to use, copy, modify, merge, publish, distribute, sublicense, and/or  }
{ sell copies of the Software, and to permit persons to whom the Software is   }
{ furnished to do so, subject to the following conditions:                     }
{                                                                              }
{ The above copyright notice and this permission notice shall be included in   }
{ all copies or substantial portions of the Software.                          }
{                                                                              }
{ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR   }
{ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,     }
{ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE  }
{ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER       }
{ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,}
{ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN    }
{ THE SOFTWARE.                                                                }
{                                                                              }
{ Version       Date          Description            Modified by               }
{ ---------------------------------------------------------------------------- }
{  1.0.0        29-Jan-2023   Initial Release          Andrew Tierney          }
{ ---------------------------------------------------------------------------- }

interface

uses
  System.SysUtils, System.Classes, Vcl.Controls, Vcl.Forms, uniGUIBaseClasses,
  uniGUIClasses, uniPanel, uniHTMLFrame,
  uniGUITypes, uniGUIJSUtils, uniGUIApplication,System.Json;

type TPlayModes = (Normal, Bounce);
type TDirection = (Forward, Backward);


type
  TUniLottie = class(TUniCustomHTMLFrame)
  private
    { Private declarations }
    FOnFinished : TNotifyEvent;
    fControls : Boolean;
    fHover    : Boolean;
    fAutoplay : Boolean;
    fLoop     : Boolean;
    fBackgroundColour: String; {can be transparent or    rgba(0, 0, 0, 0.51) }
    fWidth    : string;        { Can be 300px or 30% - pixels or percent }
    fHeight   : string;        { Can be 300px or 30% - pixels or percent }
    fAnimationSpeed: Float32;
    fPlayMode : TPlayModes;
    fDirection : TDirection;
    fAnimationFile: string;  { place in files/lottie/lf20_yom6uvgj.json  for example}

    procedure H_OnFinished(Sender: TObject);
    function GetOnFinished: TNotifyEvent;
    procedure SetOnFinished(const Value: TNotifyEvent);

    function BuildHTML(): string;

  protected
    { Protected declarations }
    procedure WebCreate; override;
    procedure JSEventHandler(AEventName: string; AParams: TUniStrings); override;
  public
    { Public declarations }
    constructor Create(owner: TComponent); override;
    destructor Destroy; override;
    procedure Clear;
    procedure Play;
  published
    { Published declarations }
      property ShowControls: Boolean read fControls write fControls;
      property Hover: Boolean read fHover write fHover;
      property Autoplay: Boolean read fAutoplay write fAutoplay;
      property Loop: Boolean read fLoop write fLoop;
      property BackgroundColour: string read fBackgroundColour write fBackgroundColour;
      property AnimationWidth: string read fWidth write fWidth;
      property AnimationfHeight: string read fHeight write fHeight;
      property AnimationSeed: float32 read fAnimationSpeed write fAnimationSpeed;
      property PlayMode: TPlayModes read fPlayMode write fPlayMode;
      property Direction: TDirection read fDirection write fDirection;
      property AnimationFile: string read fAnimationFile write fAnimationFile;
  end;

procedure Register;

implementation

procedure Register;
begin
  RegisterComponents('uniGUI Extensions', [TUniLottie]);
end;

{ TUniLottie }

function TUniLottie.BuildHTML: string;
var bstr: string;
begin
  // <lottie-player src="https://assets1.lottiefiles.com/datafiles/HN7OcWNnoqje6iXIiZdWzKxvLIbfeCGTmvXmEm1h/data.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;" hover loop controls autoplay></lottie-player>

  bstr := '';
  bstr := bstr + '<lottie-player ';
  bstr := bstr + ' id="'+JSName+'" ';
  bstr := bstr + ' src="/files/lottie/'+fAnimationFile+'" ';

  if fControls then
      bstr := bstr + ' controls ';

  if fHover then
      bstr := bstr + ' hover ';

  if fAutoplay then
      bstr := bstr + ' autoplay ';

  if fLoop then
      bstr := bstr + ' loop ';

  bstr := bstr + ' background="' + fBackgroundColour + '" ';
  bstr := bstr + ' style="width: ' + fWidth + '; height: ' + fHeight + ';"';

  bstr := bstr + ' speed="' + FloatToStr(fAnimationSpeed) + '"';

  if fPlayMode = TPlayModes.Normal then
      bstr := bstr + ' mode="normal" '
  else
      bstr := bstr + ' mode="bounce" ';

  bstr := bstr + 'complete: function() { ajaxRequest('+JSName+',"onFinished",[]); },';
  bstr := bstr + '/>';
  result := bstr;

end;

procedure TUniLottie.Clear;
begin
   fControls := false;
   fHover    := false;
   fAutoplay := true;
   fLoop     := true;
   fBackgroundColour := 'transparent';
   fWidth    := '100%';
   fHeight   := '100%';
   fAnimationSpeed := 1;
   fPlayMode := TPlayModes.Normal;
   fDirection := TDirection.Forward;
   fAnimationFile := '';
end;

constructor TUniLottie.Create(owner: TComponent);
begin
  inherited;
  Clear;
end;

destructor TUniLottie.Destroy;
begin
  inherited;
end;

function TUniLottie.GetOnFinished: TNotifyEvent;
begin
    result := FOnFinished;
end;

procedure TUniLottie.H_OnFinished(Sender: TObject);
begin
    if Assigned(FOnFinished) then
       FOnFinished(Sender);
end;

procedure TUniLottie.JSEventHandler(AEventName: string; AParams: TUniStrings);
begin
  inherited;

  if AEventName = 'onFinished' then
  begin
     H_OnFinished(self);
  end;
end;

procedure TUniLottie.Play;
begin
  HTML.Text := BuildHTML;
end;

procedure TUniLottie.SetOnFinished(const Value: TNotifyEvent);
begin
     FOnFinished := Value;
end;

procedure TUniLottie.WebCreate;
begin
  inherited;
  // Optional Webcreate extras
end;

Initialization

UniAddJSLibrary('lottie/lottie-player.js',False,[upoFolderFiles,upoPlatformBoth]);

end.

 

[Sherzod]

Hello,

Thank you for your contribution.

[billyChou]

Thanks

 

in delphi 10.1 

 

 fAnimationSpeed: Float32;  ->change to  real