原文:WPF特效-实现弧形旋转轮播图

项目遇到,琢磨并实现了循环算法,主要处理循环替换显示问题

(如:12张图组成一个圆弧,但总共有120张图需要呈现,如何在滑动中进行显示块的替换,并毫无卡顿)

处理的自己感觉比较满意,记录一下。

    2D效果图:


                                         

    

     2D动态Gif效果:

                                                        


       2D思路: Canvas作为承载控件,控制显示个数,以角度作为判断是否显示的标准。 同时图片以线程池或者延时加载的方式实现加载性能的优化。

       2D循环关键:

        private void UpdateLocation()
        {
            for (int i = 0; i < this.ElementList.Count; i++)
            {
                NavItem oItem = this.ElementList[i];

if(oItem.Degree - this.CenterDegree >= this.TotalDegree /2d)
                    oItem.Degree -= this.TotalDegree;
                else if(this.CenterDegree - oItem.Degree > this.TotalDegree / 2d)
                    oItem.Degree += this.TotalDegree;

if (oItem.Degree >= 90d && oItem.Degree < 270d) // Degree 在90-270之间的显示
                    this.SetElementVisiable(oItem);
                else
                    this.SetElementInvisiable(oItem);
            }
        }

      3D效果图:

        


      3D动态Gif效果:

  

                     


      3D思路:以Viewport3D 作为容器,ModelVisual3D 实现元素块的承载,转动效果通过控制Camera的Angle角度实现。

以显示块构成圆弧的角度以及Camera的旋转角度为依据控制元素块是否呈现或隐藏。

  3D循环替换关键

private void DoUpdateLayout()
        {
            for (int i = 0; i < this.ElementList.Count; i++)
            {
                InteractivePanel3D oVisualItem = this.ElementList[i];
                
                if (oVisualItem.Degree + this.CameraAngleYZm.Angle >= this.TotalDegree / 2d)
                    oVisualItem.Degree -= this.TotalDegree;
                else if (oVisualItem.Degree + this.CameraAngleYZm.Angle <= -this.TotalDegree / 2d)
                    oVisualItem.Degree += this.TotalDegree;

//元素块角度与3D场景旋转角度的角度差; 角度差在定义的范围内则元素块显示,否则隐藏
                double dDistanceToCenter = Math.Abs(oVisualItem.Degree + this.CameraAngleY.Angle - COriginViewprotAngel);
                if (dDistanceToCenter <= CBoundDegree)
                    this.SetVisualItemVisible(oVisualItem);
                else
                    this.SetVisualItemInvisible(oVisualItem);
            }
        }

WPF特效-实现弧形旋转轮播图相关推荐

  1. js 移动端网页特效+移动端轮播图案例+移动端常用开发插件的使用

    触屏事件 常见触屏事件: 触屏touch事件 说明 touchstart 手指触摸到DOM元素时触发 touchmove 手指在DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触 ...

  2. 用CSS3写一个旋转轮播图

    用CSS3写一个旋转轮播图 今天用css3写一个不一样的轮播图3D效果. 先看下最后效果吧 1.旋转轮播图结构制作 // html <body><section><div ...

  3. WebAPI第四天学习总结—— 常见网页特效案例(轮播图、节流阀、返回顶部、筋斗云案例)

    常见网页特效案例 案例:网页轮播图 轮播图也称为焦点图,是网页中比较常见的网页特效. 效果: 功能需求: ​ 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. ​ 2.点击右侧按钮一次,图片往 ...

  4. 移动端网页特效移动端轮播图

    触屏事件 移动端浏览器兼容性较好,无需考虑JS兼容问题,但是移动端也有自己独特之处,比如触屏事件touch (也称触摸事件)Android和IOS都有 touch对象代表一个触摸点 ,触屏事件可响应用 ...

  5. html轮播图3d翻转,jQuery自适应-3D旋转轮播图

    var slideNumber; //轮播图片的数量 var miniSlideBtn = true; //miniSlideBtn=true为开启滚动按钮 var isableTouch = tru ...

  6. 用原生JS实现旋转轮播图

    html代码 <div class="wrap" id="wrap"><div class="slide" id=&quo ...

  7. HTML中jquery轮播图旋转,jquery 3d轮播图制作方法 (实现旋转轮播图)

    /*轮播*/ .lb_gl{margin-bottom: 30px;background: url(../images/bg_3d.png);background-size: 100% 100%;he ...

  8. html5圆形图片轮播,jQuery超酷响应式圆形图片轮播图特效

    mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单 在同一个 ...

  9. HTML圆形立体感轮播图,jQuery超酷响应式圆形图片轮播图特效

    mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单 在同一个 ...

最新文章

  1. 05后都上清华了!首批丘成桐数学领军人才名单发布,三位菲尔兹奖得主为其授课,周末就来学校报到...
  2. 每日 30 秒 ⏱ 唯一的数据集
  3. C/Cpp / STL / vector 释放内存的方案
  4. Strust2初之体验
  5. java mybatis 返回map_mybatis返回map集合的格式是什么?mybatis返回map集合实例
  6. linux shell脚本关于文件存在与否的判断
  7. 教你在CentOS 8上安装和配置Redmine项目管理系统
  8. git svn clone
  9. vscode还用装git_在windows下搭建编程环境git+vscode安装配置教程
  10. 基于Ubuntu系统下的Hadoop 环境搭建(新手可尝)
  11. 计算机考试多选试题及答案,计算机中级职称考试试题及答案 [2018职称计算机考试WPS_Office多选试题及答案]...
  12. JS验证通过之后才提交表单
  13. Fiddler - 使用 Fiddler 监控本地 HTTP 请求,谷歌浏览器提示“隐私设置错误”
  14. 用python绘制熊猫图案_python – 有没有办法在ggplot中绘制一个熊猫系列?
  15. Java基础巩固Day2作业
  16. 什么是LSI关键词?
  17. 2022.08.10 第三组 高小涵
  18. 一张图搞清楚中国茶叶分类
  19. HIS系统多少钱?HIS怎么卖?
  20. rebol ODBC链接数据库

热门文章

  1. HTML 块标签,行内标签,行内块标签以及之间的相互转换
  2. Post/Redirect/Get模式防止表单重复提交
  3. Linux01-Linux文本编辑器vim编辑器深入详解22
  4. Linux帮助信息获取
  5. jQuery.protoype.xxx=function(){}
  6. 提高电脑开机速度的一些基本操作
  7. Github 上 10 个值得学习的 Springboot 开源项目
  8. file.php https,使用HTTPS链接和php方法(file_get_contents,getimagesize)
  9. Nacos源码心跳异常检测
  10. feign整合hystrix: