如何在Delphi Firemonkey Android 上使用 TSlideTransitionEffect 实现图像的幻灯片动画

Question

我正在尝试在几个 TImages 对象之间创建一个简单的幻灯片动画（向右滑动并替换为下一个图像），但它在屏幕上看起来不正确，所以我可能做错了什么......

我首先关注这个维基： http://docwiki.embarcadero.com/CodeExamples/Sydney/en/FMX.TSwipeTransitionEffect_Animation 它使用滑动过渡，效果很好。但是当我尝试将其更改为幻灯片过渡时，它效果不佳...在 Windows 上看起来不错，但在 Android 上我看到图像被中间剪切并出现在屏幕顶部，就像某种“y 轴偏移”（参见屏幕截图）。 我也不知道如何设置 TPoint 位置的末尾来滑动整个图像宽度。使用 IMAGE_WIDTH*4.7 在 Windows 上效果很好（当整个图像完成滑动时动画结束）。一旦动画结束，较小的宽度值就会“跳”到结束位置）。但在 Android 上它效果不佳：动画没有在确切的位置结束动画...我尝试了 screen.width 和 Form1.width，但它们效果不佳。

Android 上的转换如下所示：

而不是像这样（如在 Windows 上看到的）：

表单属性如下所示：

我有 7 个 TImage 图像作为“页面”，并将它们的指针保存在数组 aIm_pages[1..7] 中以帮助动画，每次单击下一个按钮时都会前进一个全局整数索引（iActivePage）以检索下一个图像作为过渡效果的目标。对于动画本身，我使用另一个名为 im_page_top 的 TImage，它从上面数组上的图像加载位图。

我使用以下函数来为下一个/上一个按钮“OnMouseUp”事件的过渡设置动画：

procedure TForm1.Vid_Show_Page;
{ start transition to show next page image, called from next button OnMouseUp event }
begin
  begin
    ScreenWidth  := screen.size.width;
    ScreenHeight := screen.size.height;

    PathAnimation1.Enabled := False;
    SlideTransitionEffect1.Target := aIm_pages[iActivePage].Bitmap;
    SelectionPoint1.Position.Point := PointF(0,0);
    PathAnimation1.Parent := SelectionPoint1;
    PathAnimation1.Path.Clear;
    // begin Path for mouse pointer
    PathAnimation1.Path.MoveTo(PointF(0,0));
    PathAnimation1.Path.LineTo(PointF(DEFAULTTUTWIDTH*4.7,0));
    // end
    PathAnimation1.Duration := 2;
    SlideTransitionEffect1.Enabled := True;
    PathAnimation1.Start;
  end;
end;

并分别在 TPathAnimation 的“OnFinish”和“OnProcess”事件处理程序上使用 PathAnimation1Finish() 和 PathAnimation1Process()：

procedure TForm1.PathAnimation1Finish(Sender: TObject);
{ run from 'OnFinish' event of TPathAnimation, when the animation ends }
var
  BitMap : TBitmap;
begin
  BitMap := TBitmap.Create(0,0);
  BitMap.Assign(SlideTransitionEffect1.Target);
  im_page_top.Bitmap.Assign(BitMap);
  SlideTransitionEffect1.SlideAmount := PointF(0,0);
end;

procedure TForm1.PathAnimation1Process(Sender: TObject);
{ run from 'OnProcess' event of TPathAnimation, during the animation }
begin
  SlideTransitionEffect1.SlideAmount := SelectionPoint1.Position.Point;
end;

我使用这些常量：

const
  TUTORIALPAGES    = 7;
  DEFAULTTUTHEIGHT = 940;
  DEFAULTTUTWIDTH  = 1800;

创建表单时，我还使用以下函数来调整图像的大小和位置：

procedure TForm1.FitImageToScreen(img: TImage; w,h: integer);
var
  s: Single;
begin
  s := min(ScreenWidth/round(w), ScreenHeight/round(h));
  img.Size.Height := s * h;
  img.Size.Width  := s * w;
  img.Position.X  := (screenWidth  - w*s) * 0.5;
  img.Position.Y  := (screenHeight - h*s) * 0.5;
end;

1. 我做错了什么，导致 Android 上出现 y 偏移......？
2. 我应该使用什么值作为动画的终点，在线而不是 DEFAULTTUTWIDTH4.7： PathAnimation1.Path.LineTo(PointF(DEFAULTTUTWIDTH4.7,0));

如果您需要整个unit1.pas（和/或unit1.fmx文件），请告诉我

Answer 1

我和你有同样的问题。在 PC 上，它工作得很好，但在 Android 上，过渡动画开始有点低，好像失去了图像的原始定位。

我必须对您的原始代码进行一些调整，例如为slideTransitionEffect2.Progress建立正确的值，我认为它会根据图像大小而变化。 你还使用了imagesize * 4.7，我注意到它适用于windowns，但在android上我必须将值更改为8

似乎当动画开始时它会丢失Y或高度的值

我将我的代码留在这里，尽管它非常相似。

procedure TFrameBoasVindas.Image4Click(Sender: TObject);
begin

    PathAnimation1.Enabled := False;
    SlideTransitionEffect2.Target :=ImageList1.Bitmap(Image4.Bitmap.Size, FCurrentImage);

    Inc(FCurrentImage);
    if FCurrentImage >= ImageList1.Count then
        FCurrentImage := 0;

    selectionPoint1.Position.Point := PointF(0,0);

    PathAnimation1.Parent := SelectionPoint1;
    PathAnimation1.Path.Clear;
    // begin Path for mouse pointer
    PathAnimation1.Path.MoveTo(PointF(0,0));
    PathAnimation1.Path.LineTo(PointF(image4.Width*8,0));
    // end
    PathAnimation1.Duration := 2;
    SlideTransitionEffect2.Enabled := True;
    slideTransitionEffect2.Progress:= 21;
    PathAnimation1.Start;
  end;


  procedure TFrameBoasVindas.PathAnimation1Finish(Sender: TObject);
  var
    BitMap : TBitmap;
  begin
    BitMap := TBitmap.Create(0,0);
    BitMap.Assign(SlideTransitionEffect2.Target);
    SlideTransitionEffect2.Target := Image4.Bitmap;
    Image4.Bitmap.Assign(BitMap);
    SlideTransitionEffect2.slideamount := PointF(0,0);
end;

procedure TFrameBoasVindas.PathAnimation1Process(Sender: TObject);
begin
    SlideTransitionEffect2.SlideAmount:=SelectionPoint1.Position.Point;
end;