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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013224722/article/details/77004123

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

      (如: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. WPF特效-绘制实时2D激光雷达图

    原文:WPF特效-绘制实时2D激光雷达图 接前两篇: https://blog.csdn.net/u013224722/article/details/80738619 https://blog.cs ...

  2. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  3. jQuery自适应-3D旋转轮播图

    3D旋转轮播图 本例源于(站长之家实例http://sc.chinaz.com/jiaoben/170215391070.htm) 其他相似示例(https://www.cnblogs.com/inc ...

  4. JS-特效 ~ 05. 缓动框架兼容封装/回掉函数/兼容透明度/层级、旋转轮播图、正则表达式、验证表单注册账号、

    缓动函数中opcity  写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for…in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/ ...

  5. 原生JS实现旋转轮播图+文字内容切换

    废话不多说,直接上图看效果: 需求:点击左右按钮实现切换用户图片与信息: 原理:点击右侧左侧按钮,把3号的样式给2号,2号的给1号,1号的给5号,5号的给4号,4号的样式给3号,然后根据现在是第几张图 ...

  6. roundabout插件使用(3d旋转轮播图)兼容IE8

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. JQuery实现旋转轮播图

    css部分 <style> *{ margin:; padding:; } .container{ width:100%; height:353px; margin-top: 20px; ...

  8. 第124天:移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

  9. CSS3,3D效果轮播图

    ---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...

随机推荐

  1. 结合Wireshark捕获分组深入理解TCP/IP协议栈之TCP协议(TCP报文格式+三次握手实例)

    摘要:     本文简单介绍了TCP面向连接理论知识,详细讲述了TCP报文各个字段含义,并从Wireshark俘获分组中选取TCP连接建立相关报文段进行分析. 一.概述     TCP是面向连接的可靠 ...

  2. Sql Server 删除所有表 脚本

    如果由于外键约束删除table失败,则先删除所有约束: --/第1步**********删除所有表的外键约束*************************/ DECLARE c1 cursor f ...

  3. 9、基于Linux的v4l2视频架构应用编写

    Linux系统中,视频设备被当作一个设备文件来看待,设备文件存放在 /dev目录下,完整路径的设备文件名为: /dev/video0 . 视频采集基本步骤流程如下: 打开视频设备,设置视频设备属性及采 ...

  4. 如何调试Javascript代码

    转自原文如何调试Javascript代码 目前,常用的浏览器IE.Chrome.Firefox都有相应的脚本调试功能.作为我们.NET 阵营,学会如何在IE中调试JS就足够了,在掌握了IE中的调试方法 ...

  5. GCD 初步学习

    GCD应该是比較牛逼的东西了吧,一时半会应该是操作不好. 在cocoa-china上面有两篇关于GCD的文章.GCD 深入理解(一) GCD 深入理解(二) CSDN荣芳志博客:点击打开链接 我仅仅是 ...

  6. Python 奇葩语法

    a = 1, 2, 3 赋值后的结果,a == (1, 2, 3),将一个元组(tuple)赋给了变量 a (1, 2) + (3, ) ⇒ (1, 2, 3),并不能说明 tuple 可以添加新的元 ...

  7. mysql中的触发器和事务的操作

    触发器 语法 创建触发器: CREATE TRIGGER trigger_name trigger_time trigger_event ON tbl_name FOR EACH ROW trigge ...

  8. 二、Reids基础命令--字符串

    11.一个字符串类型的KEY同意存储的数据的最大容量是 512MB 12.INCR 使key加1,key不存在时默认是0 . 返回递增后的值. 127.0.0.1:6379> incr num ...

  9. Android自己主动检測版本号及自己主动升级

    步骤: 1.检測当前版本号的信息AndroidManifest.xml-->manifest-->android:versionName. 2.从server获取版本号号(版本号号存在于x ...

  10. ios开发事件处理之:三 :寻找最合适的view

    1:事件的产生与传递: 2:寻找最合适的view:如何查找最合适的view:需要三步:1:先判断自身是否能接受触摸事件 2:判断触摸点是否在自己身上 3:若前两条都满足,则其会从后往前遍历所有子控件( ...