Core Animation - 视觉效果<三>

博主今天把剩下的两个小节好好看了下,又敲了敲代码,还是发现了一些问题,那么下面在说这两节的过程中简述下博主遇到的问题,大家一起来看看,不清楚是博主代码的问题还是Xcode已经弥补了原先的缺陷。
1.拉伸过滤
当图片需要显示不同的大小时就会对图片进行拉伸,比如我们经常用到的设置头像等,它作用于原图片的像素上并根据需要生成新的像素图片展示在屏幕上。这里它有一个属性叫做magnificationFilter,这是一个枚举,它有三个值可供选择:

kCAFilterLinear 
kCAFilterNearest 
kCAFilterTrilinear

系统默认为kCAFilterLinear,双线行滤波算法,它通过对多个不同的像素取样,生成一个新的值,得到一个相对平滑的拉伸效果。
三线性滤波算法kCAFilterTrilinear和kCAFilterLinear很相似,大多数情况下表现相同,区别在于三线性滤波算法储存了多个大小的图片,通过三维取样,对所储存图片的大小进行比较得出合适的值。
正如书中说的,kCAFilterNearest如其名,就是采取就近取单像素点的方法,当然,出来的图片无可避免的会模糊,它只适用线条简单的图片。
书中提供了一些代码来供测试,博主写了一下,发现使用默认的双线性滤波算法并没有出现如同书中所说的模糊,事实上,博主试了以上三种属性,然而全都一个样。代码在这里,请自行下载查看:https://github.com/codeliu6572/magnificationFilter,对于博主说的问题,大家可以自己试试看。
2.组透明
如拉伸过滤一样,博主同样发现了一些问题,不管怎么设置都是全组透明的,不会出现其中颜色不一致的情况,当然,前提是必须颜色一致,否则颜色必须有差异,这一节的核心就是这两句代码:

button2.layer.shouldRasterize = YES;
button2.layer.rasterizationScale = [UIScreen mainScreen].scale;

不过博主查了下发现shouldRasterize这个属性设置为YES有助于提高系统的流畅性,比如设置圆角时,TableView滚动时动态设置圆角。代码:https://github.com/codeliu6572/AlphaAndOpacity
对于出现的不能重现的问题,博主感觉也只能归咎于Xcode在更新后完善了这个功能,如果有谁发现这几个问题是怎么回事,可以重现可以告诉博主。

<template> <!-- 外层缩放图层 --> <g :transform="`scale(${zoom})`"> <!-- 地图内容、背景等其他可缩放元素 --> <!-- ... --> </g> <!-- 独立监控点图层(不随 zoom 缩放) --> <g v-for="sensor in sensors" :key="sensor.id"> <!-- 使用反向缩放抵消外层缩放,使实际显示大小恒定 --> <g :transform="` translate(${getSensorPos(sensor).x * zoom}, ${getSensorPos(sensor).y * zoom}) scale(${1 / zoom}) `"> <circle class="sensor-ripple" r="10" fill="rgba(255, 68, 68, 0.3)" /> <circle class="sensor-core" r="6" fill="#ff4444" /> </g> </g> </template> <script setup> import { ref } from 'vue' const zoom = ref(1) // 当前缩放比例,由用户操作或 zoom control 控制 const sensors = [ { id: 1, x: 100, y: 100 }, { id: 2, x: 200, y: 150 }, // 更多传感器... ] // 根据原始坐标和当前 zoom 计算屏幕位置 const getSensorPos = (sensor) => { return { x: sensor.x, y: sensor.y } } </script> <style scoped> .sensor-core { animation: pulse 2s infinite; filter: drop-shadow(0 0 5px #ff4444); transform-origin: center; } .sensor-ripple { transform-box: fill-box; transform-origin: center; animation: ripple 2s infinite; opacity: 0.7; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes ripple { 0% { transform: scale(0.1); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } </style> 我的监控点给的信息会分:环境点和机台点,现在这两种点要以不同形状区分
最新发布
11-04
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>优化版文字淡入效果</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; line-height: 1.6; color: #333; padding: 20px; max-width: 1200px; margin: 0 auto; } .fade-container { background-color: #aabcda; border-radius: 8px; padding: 40px; margin: 40px auto; overflow: hidden; } /* 使用cubic-bezier实现更顺滑的动画曲线 */ @keyframes fadeIn { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } .fade-title { font-weight: bold; font-size: 2em; margin-bottom: 25px; color: #1a3a5f; animation: fadeIn 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } .fade-content { font-size: 1.5em; font-weight: normal; color: #2c3e50; animation: fadeIn 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; animation-delay: 0.3s; line-height: 1.7; } .content-section { margin: 30px 0; padding: 20px; background: #f8f9fc; border-radius: 8px; } h2 { margin-bottom: 15px; color: #1a3a5f; } p { margin-bottom: 15px; } </style> </head> <body> <div class="fade-container"> <h1 class="fade-title">优化后的平滑淡入效果</h1> <p class="fade-content"> 此文本采用了更顺滑的CSS3淡入动画效果。通过使用cubic-bezier缓动函数,动画表现更加流畅自然, 减少了机械感,同时保持了响应式特性。容器阴影已按需移除,保留了指定的#aabcda背景色。 </p> </div> <div class="content-section"> <h2>技术优化点</h2> <p> 1. 使用自定义cubic-bezier曲线替代标准ease-out,动画更加平滑流畅[^1] </p> <p> 2. 动画元素初始上移量从20px减少到15px,视觉上更舒适自然 </p> <p> 3. 文本采用渐变深蓝色系,提高在淡蓝色背景上的可读性 </p> <p> 4. 移除所有容器阴影效果,保持页面简洁性 </p> <p> 5. 优化了文本行间距和段落间距,提升整体阅读体验[^2] </p> </div> <div class="content-section"> <h2>布局稳定性</h2> <p> 此实现完全遵守不影响网页布局的设定要求。所有外边距(margin)和内边距(padding)都经过精确计算, 避免任何不必要的布局偏移[^3]。不同设备上均能保持一致的视觉表现。 </p> </div> <div class="content-section"> <h2>CSS代码说明</h2> <p> 淡入动画关键帧: <pre> @keyframes fadeIn { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } }</pre> </p> <p> 应用示例: <pre> .fade-title { animation: fadeIn 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }</pre> </p> </div> <script> // 确保动画在页面加载时正常触发 document.addEventListener('DOMContentLoaded', function() { const elements = document.querySelectorAll('.fade-title, .fade-content'); elements.forEach(el => { // 重置动画确保在浏览器加载完成后触发 el.style.animation = 'none'; setTimeout(() => { el.style.animation = ''; }, 10); }); }); </script> </body> </html> 请在这个代码的基础上删除容器圆角,淡入前隐藏文本,不要闪一下
06-13
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CodingFire

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值