,最后实现效果是这样的: 进一步,还能实现任意形状的镂空效果: 鼠标经过的地方清晰可见,其他地方则是模糊的。...有兴趣的可以查看这篇文章:CSS backdrop-filter简介与苹果iOS毛玻璃效果 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com) 文章链接:https://www.zhangxinxu.com...比如我需要一个星星⭐️的镂空效果,很简单,先通过一个绘制软件画一个。 然后把这段 svg 代码转义一下,这里推荐使用张鑫旭老师的SVG在线压缩合并工具。...CSS 完成,下面总结一下: 足够大的阴影是一个实现圆形镂空效果的小技巧 CSS 渐变也能轻易的绘制出圆形镂空背景 借助 CSS 变量可以很方便的利用鼠标位置实现想要的效果 backdrop-filter...可以想象成磨砂玻璃的功能 CSS Mask 可以给磨砂玻璃打孔,实现镂空的效果 借助遮罩合成特性和SVG,可以实现任意形状的镂空效果
前言 有时你会看到很多镂空的试图或者是镂空视图的动画效果,感觉很酷炫,其实只要掌握其中实现的原理,想实现怎样的效果就能实现怎样的镂空效果。 原理解析 UIView的maskView属性。...通过控制UIView的maskView、CALayer的mask有效区域,都可以修改UIView和 UIView的layer的显示外形,从而得到镂空或者其他的奇特形状及其动画。...使用图片作为mask可以直接获得需要显示的外形,需要注意的是这样的图片中需要展示的区域必须有像素,不需要显示的地方不可以有像素为空白,才能出效果,而且有像素的区域的透明度也会影响到最终的效果。...使用自定义形状的CAShapeLayer作为mask也可以达到使图层显示出镂空的效果。同样的,图层显示出来的区域是 CAShapeLayer的外形。...maskLayer.contents = (id)[UIImage imageNamed:@"123456"].CGImage; imageV.layer.mask = maskLayer; 一个镂空进度图的分布解析
本文将介绍一个小技巧,通过混合模式 mix-blend-mode 巧妙的实现文字的镂空波浪效果。 起因 一日,一群友私聊问我。...纯 CSS 实现波浪效果 在进入正题前,我们先复习下,使用 CSS 实现波浪,如果不是在镂空的文字内,而是在一个 div 容器内,可以使用滚动大圆的方式,类似于这样: 容器应用 overflow: hidden...+ z-index: -1; } } Oh,太糟糕了,仅仅这样是没法实现 -- 只是文字被镂空,文字内部才有波浪效果。...字体依然是黑色,波浪依旧无法进到镂空的字体中~ p { + background-clip: text; } 也就是这样: 强大的混合模式 看来此路不通,只能另辟蹊径。...当然,另外一个混合模式 mix-blend-mode: screen 也能达到类似的效果: 至此,通过混合模式,我们巧妙的实现了这样一个文字镂空的波浪效果。
self.view.addSubview(spinner) //spinner.stopAnimating() } 效果如下
最近公司SDK新搞了个功能,手势滑动地图后,要具备惯性滑动效果的功能。...而iOS并没有,但我还是自以为这个功能很好做...然而构思之后发现还得找百度啊,但百度给我的结果却没有一个能满足我。...所以,在我做出这个效果之后,我得将它分享出来,给有需要的人提供思路,也希望能相互讨论,接受到更好的办法做出更好的效果。...:解决它 OK,想到第2点就已经可以成为嘴强王者了,接下来就看操作是不是青铜了: demo效果如下: ?...,当然也很有可能改改代码,调一调灵敏度,效果会好很多。
直接在controller里面加代码实现的抽屉效果 @interface ViewController () { UIView* _leftView; } @end @implementation...leftView.frame = frame; //清空移动的距离,这是关键 [recognizer setTranslation:CGPointZero inView:recognizer.view]; //做弹回效果
iOS实现圆角效果 UIColor *color = [UIColor colorWithRed:0.95 green:0.95 blue:0.95 alpha:0]; [aImage setBackgroundColor
最近终于比较有空了,可以写点自己的东西了,看到弹幕好好玩就跟着写了一个简单的弹幕效果,可自动追加评论,可暂停,可循环,可随机出现,效果如下,是不是瞬间觉得有弹幕的评论高大上了?...最终效果图 其中 BullerView就是弹幕的视图,继承UIView,每一条弹幕都是一个BullerView,这里默认实现的是3个弹道(可以自己修改)。 如何让弹幕动起来呢?
CAEmitterLayer *emitter = [CAEmitterLayer layer];
cache:Bool) //第一个参数: flipFromLeft 从左边滑入 flipFromRight curlUp 从底部 curlDown 从顶部 none //实现翻页的效果
CGContextRef context = UIGraphicsGetCurrentContext(); [UIView beginAnimations:n...
UIBlurEffectStyleExtraLight, UIBlurEffectStyleLight, UIBlurEffectStyleDark } NS_ENUM_AVAILABLE_IOS
setBackgroundImage:[UIImage imageNamed:@"Background"] forBarMetrics:UIBarMetricsDefault]; 复制代码 状态栏字体颜色和隐藏 在iOS7...setStatusBarStyle:UIStatusBarStyleLightContent]; [[UIApplication sharedApplication] setStatusBarHidden:YES]; 复制代码 iOS7...UIStatusBarStyleLightContent; } - (BOOL)prefersStatusBarHidden { return YES; } 复制代码 若iOS7...但是如果用navigationBar.hidden隐藏导航栏,我们可以继续使用navigationBarHidden提供的滑动pop效果,如果用navigationBarHidden,这个操作将无效;但前者...navigationBar.hidden没有系统自动的动画效果。
1 import CoreImage 2 import AVFoundation 3 class ViewController:UIViewControll...
闲来无事写的 Core Image 里的滤镜效果的Demo,目前 Core Image 有100多种滤镜效果,Demo实现了其中大概一半的效果,实在太多了,后面有时间再补全,有兴趣的可以下载下来看一下(
今天整理了一下项目中常用的一些控件功能,整理一些UI效果来总结一下。...如今的APP开发中,UITableView是最常用的控件之一,而UITableView中有个很常见的效果就是勾选效果,这个效果是由UITableViewCell中的accessoryType属性来决定的...信息提示+V形引导图标 UITableViewCellAccessoryCheckmark, // 勾选效果...UITableViewCellAccessoryDetailButton //信息图标 }; 这几个效果我已经罗列在上面了,今天我们要探讨的,就是```UITableViewCellAccessoryCheckmark...```勾选效果。
开篇 项目用到了一个粒子效果,本来是用GIF的,但是GIF倒出的时候,一些细节的圆角失真,变成了方形,没办法,只能代码写,下面是粒子的一些基本属性,看网上把粒子发射器比作大炮,觉得比喻的非常合理,每行都有注释...ringCell3]; //扣动扳机准备发射 [view.layer addSublayer:self.fireEmitter]; //当view出现在屏幕上时候,发射炮弹 最后传个效果吧
说道抽屉效果在iOS中比较有名的第三方类库就是PPRevealSideViewController。...一说到第三方类库就自然而然的想到我们的CocoaPods,今天的博客中用CocoaPods引入PPRevealSideViewController,然后在我们的工程中以代码结合storyboard来做出抽屉效果...三、使用PPRevealSideViewController来实现抽屉效果 当然了首先在pch文件中引入我们的第三方类库,然后使用即可 1.在storyboard拖出来我们要用的视图控制器...self.revealSideViewController popViewControllerWithNewCenterController:view animated:YES]; 7 } 四.到此效果实现完毕...,下面是效果图: ?
今天就讲解一个查看和收起大图的动画效果,先直接看效果图: 如图所示,最开始是一个小图,点击小图可以查看大图。大图会从小图的位置和大小“弹”出来,同时背景变成半透明的阴影。...self.smallImageView]; } 注意这里我在设置小图的大小时用到了两个事先设好的常量:屏幕的高和宽,这样就会根据手机的屏幕大小来保证图片始终是居中显示的,关于这两个常量,可以查看我这篇博客:iOS...这里的动画我们使用的是最简单的iOS 7开始支持的基于block的UIView动画,在我的这篇博客中也有详细讲解:iOS基础动画教程 然后,我们初始化了阴影背景视图,并添加到界面上,此时不要忘记,要再次将大图手动推送到最上层...然后我们使用了一个延迟函数,确保在图片收缩回小图以后,再将图片移除界面,保证动画的效果。 至此,就完成了我们整个的动画了。...这个例子中图片是中规中矩地放在居中位置,你也可以试一下将小图放在其他位置,其实真实的app中很少有居中放置的,从别的地方伸缩放大缩小效果会更加有趣的。
processing : 40 filters , 图像处理相关. 3、Blending modes : 29 filters , 混合模式相关. 4、Visual effects : 25 filters , 视觉效果相关...GPUImageCrosshatchFilter GPUImage 黑白网状效果,shader 源码如下: /**********************************************...*****************************************/ //@Author:猿说编程 //@Blog(个人博客地址): www.codersrc.com //@File:IOS...– OpenGL ES 黑白网状效果 GPUImageCrosshatchFilter //@Time:2022/05/24 06:30 //@Motto:不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累...使用 GPUImageCrosshatchFilter GPUImage 黑白网状效果,原图: **GPUImageCrosshatchFilter GPUImage 黑白网状效果,效果图:**
领取专属 10元无门槛券
手把手带您无忧上云