首页 > 其他分享 >swiftui中使用scaleEffect和rotationEffect实现缩放和旋转效果

swiftui中使用scaleEffect和rotationEffect实现缩放和旋转效果

时间:2024-07-21 18:26:42浏览次数:14  
标签:200 rotationEffect 缩放 scaleEffect 旋转 useEffect

在SwiftUI中,你可以使用.scaleEffect()和.rotationEffect()来实现缩放和旋转动画,缩放和旋转的内容可以是图片,文字等view视图。

scaleEffect可以实现缩放效果,配合动画可以实现好看的过度效果,其中的参数是缩放的倍数,1表示原本大小,大于1表示放大,小于1表示缩小。

示例代码:

Text("Hello, World!")
                .font(.title)
                .scaleEffect(useEffect ? 1 : 0.7)

rotationEffect表示实现旋转效果,配合动画可以实现好看的旋转效果,其中的参数是旋转的度数,示例代码:

Image("xigua")
                .resizable()
                .frame(width: 200, height: 200)
                .scaleEffect(useEffect ? 1 : 0.7)
                .rotationEffect(.degrees(useEffect ? 100 : 0))

案例使用代码:

//
//  ScalRotaEffect.swift
//  SwiftBook
//
//  Created by Song on 2024/7/21.
//

import SwiftUI

struct ScalRotaEffect: View {
    // 缩放和旋转效果
    @State var useEffect = false
    var body: some View {
        VStack {
            Text("Hello, World!")
                .font(.title)
                .scaleEffect(useEffect ? 1 : 0.7)
            Image("xigua")
                .resizable()
                .frame(width: 200, height: 200)
                .scaleEffect(useEffect ? 1 : 0.7)
                .rotationEffect(.degrees(useEffect ? 100 : 0))
            Button(action: {
                withAnimation { useEffect.toggle() }
            }, label: {
                Text("旋转和缩放")
            }).padding()
        }
    }
}

#Preview {
    ScalRotaEffect()
}

 

标签:200,rotationEffect,缩放,scaleEffect,旋转,useEffect
From: https://blog.csdn.net/weixin_44786530/article/details/140590118

相关文章

  • unity3d缩放物体
    unity3d缩放物体 usingUnityEngine;publicclassScaleObject:MonoBehaviour{//缩放速度,可以根据需要调整publicfloatscaleSpeed=0.1f;//控制缩放的方向,这里以X轴为例publicboolscaleX=true;publicboolscaleY=false;publi......
  • 【吴恩达 机器学习 学习笔记】多元线性回归模型(1):矢量化及特征缩放
    文章目录多元线性回归模型矢量化用于多元线性回归的梯度下降法正态方程(只作了解即可)特征缩放回顾:线性回归模型及梯度下降的原理多元线性回归模型在前面的学习中,我们掌握了根据房屋的面积预测房屋价格的方法(单变量线性回归模型),如果我们的房屋特征增加(如增加了房间......
  • 元素缩放?一个vue指令搞定
    说在前面......
  • react hooks实现对元素拖拽及鼠标滚轮缩放
    page.jsximport'./index.less';import{useDrag,useZoom}from'./hooks';constDragZoom=()=>{const{handleMouseDown,handleMouseMove,handleMouseUp}=useDrag();const{handleWheel,scale}=useZoom();re......
  • HTML页面如何保证背景图缩放大小一致
    HTML页面如何保证背景图缩放大小一致在网页设计中,背景图是一个常见的元素,它可以为网页增添美感和视觉效果。然而,当用户在不同设备上访问网页时,由于屏幕尺寸和分辨率的不同,背景图的缩放大小可能会出现问题。本文将介绍如何使用HTML和CSS来保证背景图在不同设备上缩放大小一致。1.......
  • qt 简单实验 一个可以向右侧拖拽缩放的矩形
    1.概要目的是设置一个可以拖拽缩放的矩形,这里仅用右侧的一个边模拟这个过程。就是为了抓住核心,这个便解决了,其他的边也是一样的。而这个更能体现原理。2.代码2.1 resizablerectangle.h#ifndefRESIZABLERECTANGLE_H#defineRESIZABLERECTANGLE_H#include<QWidget>#in......
  • 解决浏览器缩放的时候,重新设置滚动条的位置,使页面滚动条固定悬浮在页面底部
    项目场景:浏览器调试页面兼容页面时,缩放页面宽度,整体超出时滚动条出现在页面最底部,不是悬浮在页面下面,只有滚动到最底部才出现,需要的是悬浮在页面底部,不是滚动到最下面才出现解决方案:在引入页面组件或者最外部div,添加类名然后在mounted的时候监听resizemethods:{......
  • electron + vue3 自定义窗口:移动,缩放,置顶
    electronmain.jsconst{BrowserWindow,ipcMain}=require('electron');constpath=require("path")constCustomWindow=require('./CustomWindow')constwin=newBrowserWindow({frame:false,transparent:true,......
  • WPF阻止窗体被系统缩放,使用显示器DPI
    WPF默认是跟随系统DPI变化(缩放与布局)而缩放窗体的;微软把它称为默认DPI感知,当DPI发生变化时WPF感知到后缩放窗体,介绍链接:设置进程的默认DPI感知(Windows)-Win32apps|MicrosoftLearn如果我们不希望窗体被缩放,而是让窗体使用显示器DPI该怎么办呢?首先修改app.manifest,如......
  • [Qt开发]当我们在开发兼容高分辨率和高缩放比、高DPI屏幕的软件时,我们在谈论什么。
    前言最近在开发有关高分辨率屏幕的软件,还是做了不少尝试的,当然我们也去网上查了不少资料,但是网上的资料也很零碎,说不明白,这样的话我就做个简单的总结,希望看到这的你可以一次解决你有关不同分辨率下的所有问题。分辨率?DPI?首先我们搞清楚我们现在到底面对的是什么场景。在开发高......