3秒滚动一次，且无缝循环滚动，用css3怎么实现

Posted 2023-05-04

如果你只想使用css3来实现轮播，你就只有通过定位来控制每张图片的位置，使用animate动画来实现轮播 参考技术A animate: xxx 3s linear 0s normal|alternate
-webkit-animate: xxx 3s linear 0s normal|alternate

WPF效果第一百八十三篇之无缝循环滚动

这不最近一直都在瞎玩Xamarin,渐渐的把WPF给冷落的;假期前突然收到一个着急的模糊不清的需求:图片无缝循环滚动;由于着急我就比较偷懒直接用了很low的方式实现了一版:

1、前台就是直接Canvas嵌套StackPanel:

<Canvas ClipToBounds="True" x:Name="RootCanvas" Background="#0866AD" Height="800" Width="600">
        <StackPanel x:Name="MainStackPanel">
            <StackPanel.RenderTransform>
                <TranslateTransform x:Name="ButtonTranslateTransform"/>
            </StackPanel.RenderTransform>
        </StackPanel>
</Canvas>

2、后台无非就是改变TranslateTransform的Y属性,也可以Canvas的Top属性：

doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(time * count));
doubleAnimation.From = -MainStackPanel.ActualHeight;
doubleAnimation.To = 0;
doubleAnimation.RepeatBehavior = new RepeatBehavior(1);
doubleAnimation.Completed += KeyAlarmDa_Completed;
Storyboard.SetTargetName(doubleAnimation, nameof(ButtonTranslateTransform));
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(TranslateTransform.YProperty));
var storyboardName = "s" + KeyAlarmSb.GetHashCode();
Resources.Add(storyboardName, KeyAlarmSb);
KeyAlarmSb.Children.Add(doubleAnimation);
KeyAlarmSb.Begin();

3、关于无缝衔接处理,我是直接在动画结束后对控件进行了截图,然后加到Panel中:

int pixelWidth = Convert.ToInt32(RootCanvas.ActualWidth);
int pixelHeight = Convert.ToInt32(RootCanvas.ActualHeight);
double dpiX = 96;
double dpiY = 96;
PixelFormat pixelFormat = PixelFormats.Pbgra32;
RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap(pixelWidth, pixelHeight, dpiX, dpiY, pixelFormat);
renderTargetBitmap.Render(RootCanvas);
var encoder = new PngBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap));
MainStackPanel.Children.Add(new Image()

    Source = renderTargetBitmap, Stretch = Stretch.Fill
);

4、最初的需求是满足了,但需求又增加了:点击每一个图片可展示详细信息;没办法只能再次去找到了一个方式HitTest:

VisualTreeHelper.HitTest(MainStackPanel, new HitTestFilterCallback(OnHitTestFilterCallback), new HitTestResultCallback(OnHitTestResultCallback), new PointHitTestParameters(item));

5、根据可视区域内的控件再次追加到Panel中:

foreach(var row in rows)

    ItemGrid item = new ItemGrid(row.Books);
    //选中后暂停这个滚动效果
    item.SelectOrCloseBookAction += StopOrResumeAnimation;
    MainStackPanel.Children.Add(item);

6、最终实现效果:

最终简单的效果先这样吧;以后有时间的话,可以再去摸索一下更复杂的效果;编程不息、Bug不止、无Bug、无生活;改bug的冷静、编码的激情、完成后的喜悦、挖坑的激动 、填坑的兴奋;这也许就是屌丝程序员的乐趣吧;今天就到这里吧;希望自己有动力一步一步坚持下去;生命不息,代码不止;大家抽空可以看看今天分享的效果,有好的意见和想法,可以在留言板随意留言;我看到后会第一时间回复大家,多谢大家的一直默默的关注和支持!如果觉得不错,那就伸出您的小手点个赞并关注一下,多谢您的支持！