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特效-实现弧形旋转轮播图的更多相关文章
- WPF特效-绘制实时2D激光雷达图
原文:WPF特效-绘制实时2D激光雷达图 接前两篇: https://blog.csdn.net/u013224722/article/details/80738619 https://blog.cs ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- jQuery自适应-3D旋转轮播图
3D旋转轮播图 本例源于(站长之家实例http://sc.chinaz.com/jiaoben/170215391070.htm) 其他相似示例(https://www.cnblogs.com/inc ...
- JS-特效 ~ 05. 缓动框架兼容封装/回掉函数/兼容透明度/层级、旋转轮播图、正则表达式、验证表单注册账号、
缓动函数中opcity 写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for…in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/ ...
- 原生JS实现旋转轮播图+文字内容切换
废话不多说,直接上图看效果: 需求:点击左右按钮实现切换用户图片与信息: 原理:点击右侧左侧按钮,把3号的样式给2号,2号的给1号,1号的给5号,5号的给4号,4号的样式给3号,然后根据现在是第几张图 ...
- roundabout插件使用(3d旋转轮播图)兼容IE8
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JQuery实现旋转轮播图
css部分 <style> *{ margin:; padding:; } .container{ width:100%; height:353px; margin-top: 20px; ...
- 第124天:移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
- CSS3,3D效果轮播图
---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...
随机推荐
- html的meta标签的charset应该用UTF-8还是utf-8?
之前我也纠结过写html的时候是用<meta charset="UTF-8"/> 或者是 <meta charset="utf-8"/> ...
- 6 、字符编码笔记:ASCII,Unicode和UTF-8
1. ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出 256种状态,这被称为一个字节(byte) ...
- C語言 rand函数 进阶探讨与实现
C语言中随机函数应用 可能大家都知道C语言中的随机函数random,但是random函数并非ANSI C标准,所以说.random函数不能在gcc,vc等编译器下编译通过. 那么怎么实现 ...
- swift学习第十五天:闭包
闭包 闭包的介绍 闭包和OC中的block非常相似 OC中的block是匿名的函数 Swift中的闭包是一个特殊的函数 block和闭包都经常用于回调 注意:闭包和block一样,第一次使用时可能不习 ...
- JDK8 直接定义接口中静态方法
JDK8前,接口只能是抽象方法. 但是在JDK8中,静态方法是可以直接定义方法体,可以直接用接口名调用.实现类和实现是不可以调用的 一.直接调用接口的静态方法 二.实现接口的子类来调用接口的静态方法 ...
- copy 和 MutableCopy
1:copy拷贝得到的对象都是不可变对象,MutableCopy拷贝得到的对象都是可变对象.MutableCopy拷贝得到的对象都是新的对象,会重新分配内存地址,而copy拷贝的对象既可以是新对象,也 ...
- php中usort自定义排序如何使用
php中usort自定义排序如何使用 一.总结 一句话总结:多写一个规则函数,而这个函数的写法和普通函数一样,调用的时候规则函数用函数名的字符串. 1.用户自定义规则函数有哪三个? usort — 使 ...
- 学习Numpy基础操作
# coding:utf-8 import numpy as np from numpy.linalg import * def day1(): ''' ndarray :return: ''' ls ...
- 【codeforces 742C】Arpa's loud Owf and Mehrdad's evil plan
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- html中如何实现表格移入移出时背景颜色改变?(两种方法)
html中如何实现表格移入移出时背景颜色改变?(两种方法) 一.总结 1.通过css的table标签的hover属性: 10 #tab:hover{ 11 background: green 12 } ...