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特效-实现弧形旋转轮播图相关推荐
- js 移动端网页特效+移动端轮播图案例+移动端常用开发插件的使用
触屏事件 常见触屏事件: 触屏touch事件 说明 touchstart 手指触摸到DOM元素时触发 touchmove 手指在DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触 ...
- 用CSS3写一个旋转轮播图
用CSS3写一个旋转轮播图 今天用css3写一个不一样的轮播图3D效果. 先看下最后效果吧 1.旋转轮播图结构制作 // html <body><section><div ...
- WebAPI第四天学习总结—— 常见网页特效案例(轮播图、节流阀、返回顶部、筋斗云案例)
常见网页特效案例 案例:网页轮播图 轮播图也称为焦点图,是网页中比较常见的网页特效. 效果: 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.点击右侧按钮一次,图片往 ...
- 移动端网页特效移动端轮播图
触屏事件 移动端浏览器兼容性较好,无需考虑JS兼容问题,但是移动端也有自己独特之处,比如触屏事件touch (也称触摸事件)Android和IOS都有 touch对象代表一个触摸点 ,触屏事件可响应用 ...
- html轮播图3d翻转,jQuery自适应-3D旋转轮播图
var slideNumber; //轮播图片的数量 var miniSlideBtn = true; //miniSlideBtn=true为开启滚动按钮 var isableTouch = tru ...
- 用原生JS实现旋转轮播图
html代码 <div class="wrap" id="wrap"><div class="slide" id=&quo ...
- HTML中jquery轮播图旋转,jquery 3d轮播图制作方法 (实现旋转轮播图)
/*轮播*/ .lb_gl{margin-bottom: 30px;background: url(../images/bg_3d.png);background-size: 100% 100%;he ...
- html5圆形图片轮播,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单 在同一个 ...
- HTML圆形立体感轮播图,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单 在同一个 ...
最新文章
- 05后都上清华了!首批丘成桐数学领军人才名单发布,三位菲尔兹奖得主为其授课,周末就来学校报到...
- 每日 30 秒 ⏱ 唯一的数据集
- C/Cpp / STL / vector 释放内存的方案
- Strust2初之体验
- java mybatis 返回map_mybatis返回map集合的格式是什么?mybatis返回map集合实例
- linux shell脚本关于文件存在与否的判断
- 教你在CentOS 8上安装和配置Redmine项目管理系统
- git svn clone
- vscode还用装git_在windows下搭建编程环境git+vscode安装配置教程
- 基于Ubuntu系统下的Hadoop 环境搭建(新手可尝)
- 计算机考试多选试题及答案,计算机中级职称考试试题及答案 [2018职称计算机考试WPS_Office多选试题及答案]...
- JS验证通过之后才提交表单
- Fiddler - 使用 Fiddler 监控本地 HTTP 请求,谷歌浏览器提示“隐私设置错误”
- 用python绘制熊猫图案_python – 有没有办法在ggplot中绘制一个熊猫系列?
- Java基础巩固Day2作业
- 什么是LSI关键词?
- 2022.08.10 第三组 高小涵
- 一张图搞清楚中国茶叶分类
- HIS系统多少钱?HIS怎么卖?
- rebol ODBC链接数据库
热门文章
- HTML 块标签,行内标签,行内块标签以及之间的相互转换
- Post/Redirect/Get模式防止表单重复提交
- Linux01-Linux文本编辑器vim编辑器深入详解22
- Linux帮助信息获取
- jQuery.protoype.xxx=function(){}
- 提高电脑开机速度的一些基本操作
- Github 上 10 个值得学习的 Springboot 开源项目
- file.php https,使用HTTPS链接和php方法(file_get_contents,getimagesize)
- Nacos源码心跳异常检测
- feign整合hystrix: